使用 webpackDevServer 提升开发效率

Webpack中文文档：
开发环境 | webpack 中文文档

现阶段我们想要查看代码运行的结果只能通过npm run build打包后，运行dist文件夹下的index.html才能看到效果。
我们怎么能让webpack知道我们的代码有更新后自动编译呢？

1、watch

配置脚本：

// ...
"scripts": {
  "build": "webpack",
  "watch": "webpack --watch"
}

运行watch后，dist/index.html文件会被删除

现在我们更改main.js文件中的代码，就不需要手动执行npm run build，这是因为Webpack正在监视你的文件。
但是缺点是必须手动刷新浏览器才能看到更改。

2、webpack-dev-server（推荐）

DevServer | webpack 中文文档

安装：

npm install webpack-dev-server --save-dev

配置脚本命令：

// ...
"scripts": {
  "watch": "webpack --watch",
  "dev": "webpack serve",
  "build": "webpack"
}

配置文件：

module.exports = {
  devServer: {
    contentBase: "./dist",  // 从什么位置查找文件
    open: true  // 自动在浏览器打开
  },
  // ...
}

webpack-dev-server不仅可以帮我们监听文件还可以帮我们自动刷新浏览器。

devServe.proxy 配置开发环境跨域：
DevServer | webpack 中文文档

3、webpack-dev-middleware

简单说middleware就是让我们自己编写类似于webpack-dev-server这样的监听器，webpack-dev-server在内部使用了它，然而它也可以作为一个单独的package来使用，以便根据需求进行更多自定义设置。

安装：

$ npm install express webpack-dev-middleware --save-dev

修改package.json文件：

// ..
"scripts": {
  "watch": "webpack --watch",
  "dev": "webpack serve"
  "middleware": "node server",
  "build": "webpack"
}

修改webpack.config.js文件：

module.exports = {
  // ...
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, "dist"),
    publicPath: "/"
  },
}

新建一个server.js文件（和webpack.config.js平级）：

const express = require("express");
const webpack = require("webpack");
const webpackDevMiddleware = require("webpack-dev-middleware");
const config = require("./webpack.config"); // webpack 配置文件
const complier = webpack(config); // webpack()传入config后会返回一个编译器，编译器执行一次就会打包一次代码
const app = express();
app.use(webpackDevMiddleware, complier, {
  publicPath: config.output.publicPath
});
app.listen(8080, () => {
  console.log("程序已经启动");
})

这里涉及到Node.js的知识。

运行npm run middleware就会进行编译，如果想要做到webpack-dev-serve那样的效果是需要配置很多的东西。