webpack的安装和使用

一、安装Node.js

确认是否安装了NodeJS和npm：

node -v

npm -v

二、安装 Webpack

首先全局安装：

npm install webpack -g

现在我们来做一个小小的测试:

建一个文件夹testWebpack里面包含：
app.js(在里面输入一些可以输出的js语句如：document.write("Hello world!");)
index.html

1. cd到testWebpack所在文件夹
2. 创建npm说明文件package.json

npm init

3 . 打包：

webpack ./app.js bundle.js

我们看到在testWebpack目录下多了一个bundle.js文件
现在，可以在index.html中引用bundle.js文件，而不是app.js文件，运行index.html，已经可以看出效果了

三、在项目中添加配置文件

1. 在项目根目录下创建名称为webpack.config.js文件
2. 设置webpack.config.js文件：

module.exports = {
entry: "./app.js",
output: {</br> filename: "bundle.js"
}
}

3. cd来到testWebpack文件下
4. 直接输入webpack命令：

webpack

四、启用Webpack观察者模式

当webpack.config.js的配置发生变化，如果每次都要手动输入webpack命令来生成js文件的话，非常麻烦。Webpack为我们提供了观察者模式，启用后，任何的webpack.config.js中的变化将接受监视，自动生成最终的js文件。

1. cd到testWebpack所在文件夹
2. 启用观察者模式：

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

1. cd到testWebpack所在文件夹
2. 输入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/
即可完成加载！

下篇将更新：webpack-dev-server中iframe和inline的区别