1.全局安装
npm install -g webpack@3
2.在项目中安装
npm install --save-dev webpack@3
3.配置package.json文件
npm init
4.配置webpack.config.js文件
代码：
//引入path模块，node环境中自带的模块
const path = require("path");
module.exports = {//模块暴露
entry : "./src/entry.js",//入口文件配置项（相对路径即可）
output : {
path : path.resolve(__dirname,"dist"),
//（必需使用绝对路径，__dirname为path中获取项目绝对路径的属性）
filename : "bundle.js"
}
}
说明：
源文件（入口文件）一般放在src目录下
打包后的文件（出口文件）一般放在dist目录下
5.测试打包项目：
运行命令：
方式一：webpack
方式二：package.json的script中添加自定义字段属性，值为webpack
如："start" : "webpack"
运行：npm run start
方式三：自动监听
package.json的script中添加自定义字段属性，值为webpack --watch
如："autoStart" : "webpack --watch"
方式四：自动监听
命令：webpack --watch
退出自动监听：ctrl+c
6.插件html-webpack-plugin 自动生成index.html
安装该插件命令：
npm install --save html-webpack-plugin
修改webpack.config.js文件让插件生效
const htmlWebpackPlugin = require("html-webpack-plugin");//引入插件模块
plugins : [
new htmlWebpackPlugin() //创建插件，应用对象
]
执行命令webpack将会自动生成一个index.html文件
如果修改这个index.html文件，运行webpack的时候，修改后的内容将会被重新生成的index.hmtl覆盖
要使修改后的index.html不被覆盖需要在插件构造函数中传递如下内容：
filename : "newIndex.html",//输出新文件
template : "dist/index.html"//修改的html文件
即：
plugins : [
new htmlWebpackPlugin({
filename : "newIndex.html",//输出新文件
template : "dist/index.html"//修改的html文件
})
]
7.js文件合并
require("js文件路径")//可导入其它js的代码
第三方js文件也可用module.exports = {}的方式暴露模块
var obj = require("js文件路径")//接收暴露的模块
8.样式打包，安装loader加载器 可以将静态的样式文件一同打包到bundle.js文件中
安装：
npm install --save css-loader
npm install --save style-loader
在entry.js中导入样式
require("!style-loader!css-loader!../css/style.css");//静态资源导入需要加！，必须先导入style-loader
9.压缩js文件
webpack内置了压缩插件，存放在webpack的optimize对象下
webpack.config配置文件中
1. 引入webpack模块
var webpack = require('webpack')
2. 获取压缩插件对象
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
3. plugins中添加一个插件对象
new UglifyJsPlugin();
