手把手教你webpack3（13）开发环境
前注：
文档全文请查看 根目录的文档说明。
如果可以，请给本项目加【Star】和【Fork】持续关注。
有疑义请点击这里，发【Issues】。
6、开发环境
6.0、使用说明
安装：
npm install运行：
npm run test有三种，依次介绍。
6.1、观察模式 watch
关键字：
修改文件后自动编译，需要刷新浏览器后才能查看到新编译好的文件。
使用方式：
fork项目后，先通过 npm install 安装依赖，然后执行 npm run watch 就ok了。
这个的效果，是当编辑模块文件后，会自动触发编译。
举个例子：
- 假如我已经启用了 watch 模式；
- 通过
html-webpack-plugin以引入一个源 html 文件； - 发现这个 html 里文件没有写 title 标签的内容；
- 于是我修改这个 html 文件，添加了 title 标签的内容；
- 此时webpack会自动重新编译打包大部分文件（并不是每一个）；
- 消耗的时间比全部编译打包要少（以【实战五】为例，修改 title 标签内容，或者在相关的 js 添加一行代码，打包时间约1700-1900ms，全部打包大约耗时 6000ms）；
- 刷新打包后的 html 文件，即可查看重新编译后的代码；
优点：
- 修改代码后，只需要刷新就可以查看打包后的效果；
- 无需多次打包；
缺点：
- 每次修改后都要刷新，很麻烦；
- 如果需要一定 UI 操作之后才能得到结果的内容，用这种方式测试会很麻烦；
6.2、实时重新加载 webpack-dev-server
关键字：
修改文件后实施编译，自动刷新浏览器。
使用方式：
1.1、fork 项目形式
fork项目后，先通过 npm install 安装依赖，然后执行 npm run start 就ok了。
1.2、单独安装
单独安装的话，先 npm install --save webpack-dev-server ，然后在 webpack.config.js 里添加属性：
// webpack-dev-server
devServer: {
contentBase: './dist'
},该属性和 entry，output 平级。
然后在 package.json 里添加一条 scripts："start": "webpack-dev-server --open http://localhost:8080/login.html --config build/webpack.config.js"
就可以默认打开http://localhost:8080/login.html这个页面了。如果默认打开 index.html 页面的话，后面的 url 可以省略。
运行 npm run start 来执行。
2、安装后
会弹出一个窗口，url为：localhost:8080，但以本项目为例，因为dist文件夹没有 index.html，所以会无法显示内容。
修改url为：http://localhost:8080/login.html，即可。
举个例子：
- 假如你已经成功启动，并且访问了 login.html 文件；
- 你修改了
page/login/login_box.html文件中的账号输入框的placeholder属性； - webpack-dev-server 触发编译，会重新编译所有文件（耗时比 watch 模式要多，以本项目为例，watch 2000ms内，这个 3000ms，但比全编译的 6000ms 要快）；
- 编译好后会自动刷新页面；
优点：
- 再也不用修改后，不停的刷新页面了；
缺点：
- 但每次编译还是要额外花费时间，麻烦；
- 如果需要一定 UI 操作之后才能得到结果的内容，用这种方式测试会很麻烦；
- output 文件名不能用
[chunkhash]只能用[hash]
6.3、中间件容器 webpack-dev-middleware
关键字：
使用方式：
1.1、fork 项目形式
fork项目后，先通过 npm install 安装依赖，然后执行 npm run server 就ok了。
1.2、单独安装
先安装 express 和 webpack-dev-middleware
npm install --save express webpack-dev-middleware然后在 webpack.config.js 中的 output 添加 publicPath: '/'属性，如：
output: {
path: __dirname + '/../dist',
// 文件名，将打包好的导出为bundle.js
filename: '[name].[chunkhash].js',
publicPath: '/'
},在 build 目录下新建文件 server.js，内容如下：
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
var opn = require('opn')
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));
// Serve the files on port 3000.
app.listen(3000, function () {
console.log('Example app listening on port 3000!\n');
});
opn('http://localhost:3000/login.html')在 package.json 文件里添加一条 scripts：
"server": "node build/server.js"注意因为是在根目录下执行命令，server.js 在 build 文件夹下，所以需要是 build/server.js。
举个例子：
- 直接对比 watch 模式和 webpack-dev-server 模式吧：
- 也带服务器功能，不过 webpack-dev-server 用的是一个简单的web服务器，而这个用的是 express 的服务器；
- 跟 watch 模式类似，只使用这个的话（没任何配置），需要手动刷新页面，才能获取修改后的代码；
优点：
- 比 watch 模式多一个服务器。相较说，不需要从文件路径来访问，或者需要自己额外搭建一个服务器来访问；
- 是 HMR （模块热替换）的基础；
缺点：
- 单纯使用这个，并不能实现 HMR，还需要额外配置；
6.4、HMR
单纯的使用 开发中 Server(DevServer)，并不能达到我们预期的效果——修改代码后无需刷新页面，即可在页面上体现出变化。
因此还需要启用 HMR，参照下一篇博客。