一、安装Node.js
确认是否安装了NodeJS和npm：
node -v
npm -v
二、安装 Webpack
首先全局安装：
npm install webpack -g
现在我们来做一个小小的测试:
建一个文件夹testWebpack里面包含：
app.js(在里面输入一些可以输出的js语句如：document.write("Hello world!");)
index.html
- cd到testWebpack所在文件夹
- 创建npm说明文件package.json
npm init
3 . 打包：
webpack ./app.js bundle.js
我们看到在testWebpack目录下多了一个bundle.js文件
现在，可以在index.html中引用bundle.js文件，而不是app.js文件，运行index.html，已经可以看出效果了
三、在项目中添加配置文件
- 在项目根目录下创建名称为webpack.config.js文件
- 设置webpack.config.js文件：
module.exports = {
entry: "./app.js",
output: {</br> filename: "bundle.js"
}
}
- cd来到testWebpack文件下
- 直接输入webpack命令：
webpack
四、启用Webpack观察者模式
当webpack.config.js的配置发生变化，如果每次都要手动输入webpack命令来生成js文件的话，非常麻烦。Webpack为我们提供了观察者模式，启用后，任何的webpack.config.js中的变化将接受监视，自动生成最终的js文件。
- cd到testWebpack所在文件夹
- 启用观察者模式：
webpack --watch
3.在webpack.config.js中添加watch字段，并设置成true（默认是true，可以不填）,最后变成：
module.exports = {
entry: "./app.js",
output: {
filename: "bundle.js"
},
watch: true
}
设置完成后修改保存webpack.config.js中的引用文件，bundle.js的文件会自动更新。
五、安装启用Webpack DevServer
在实际开发中，我们往往有以下需求：
- 每次修改代码后，webpack可以自动重新打包
- 浏览器可以响应代码变化并自动刷新
webpack-dev-server提供了两种自动刷新模式：iframe和inline
- cd到testWebpack所在文件夹
- 输入npm命令安装Webpack DevServer：
npm install webpack-dev-server -g
3.输入webpack-dev-server命令：
webpack-dev-server
看到大致如下内容:
webpack-dev-server
4.在浏览器中输入：
http://localhost:8080/webpack-dev-server/ 或者 http://localhost:8080/
即可完成加载！
