Webpack4.0基础教程六：开发工具(自动编译代码)

每次要编译代码时，手动运行npm run build特别麻烦。

webpack中有几个不同的选项，可以帮助你在代码发生变化后自动编译代码：

1.webpack's Watch Mode(观察模式)

2.webpack-dev-server(提供一个服务器)

3.webpack-dev-middleware(是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。 )

webpack's Watch Mode(观察模式)

上面是官方原话，没有看懂就先来看一个栗子：

首先在package.json中添加一个npm script脚本：

=================以下内容更新于2018.9.20======================
拖了将近一个月了，妈卖批的~~~

扫描二维码关注公众号，回复： 9675364 查看本文章

======================================================

"script": {
  ...,
  "watch": "webpack –watch",
  ...
}

现在我们就可以在命令行中运行npm run watch启动观察模式，然后打开之前创建的index.html文件，报错:

这是因为之前为了检测souce map而设置的错误，我们把它去掉就好。

然后我们在src中的入口文件(index.js)文件中添加一句“console.log('watch mode')”，保存，会发现系统自动帮我们重新编译了（说明我们的配置生效了），重新刷新页面则会看到如下：

控制台上则多出了一句watch mode。

观察模式虽然能够达到自动编译代码的效果，但是其有一个缺点，就是只能帮我们自动重新编译，但不会帮我们重新刷新浏览器。如果想要在重新编译代码的同时刷新浏览器，则可以尝试使用webpack-dev-server。

另外，在执行watch mode后，会看到webpack编译代码却不会退出命令行，这是因为script脚本还在观察文件。

使用webpack-dev-server

webpack-dev-server提供一个简单的web服务器，并且能够实时重新加载(living reloading)。

首先我们需要安装相应的包：npm install –save-dev webpack-dev-server

然后在webpack.config.js中添加devServer选项：

module.exports = {
  ...,
  devServer: {
    contentBase: './dist'
  },
  ...
}

以上的配置使得webpack-dev-server将在localhost:8080下建立服务，将dist目录下的文件，作为可访问文件。

最后再在package.json文件中添加script脚本：

"script": {
  ...,
  "start": "webpack-dev-server --open",
  ...
}

现在，通过在命令行中运行npm start（注意这里是直接用npm start，一般我们都是使用npm run start，webpack-dev-server比较特殊，我们还是使用通用的npm run start以免出错），就会看到浏览器自动加载页面。如果现在修改和保存任意源文件，web服务器就会自动重新加载编译后的代码。

使用webpack-dev-middleware

webpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server 在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求。

接下来是一个webpack-dev-middleware配合express server的示例。

首先安装express和webpack-dev-middleware包：

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

接下来对webpack配置文件做一些调整，以确保中间件(middleware)功能能够正确启用：

webpack.config.js:
output:{
  ...,
  publicPath: '/'
}

publicPath也会在服务器脚本用到，以确保文件资源能够在http://localhost:3000下正确访问，

我们稍后再设置端口号。下一步就是设置我们自定义的 express 服务：

项目根目录下我们添加一个server.js文件（server.js）：

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
 
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');
});

现在添加一个npm script：

"script": {
  ...,
  "server": "node server.js",
  ...
}