文件监听与webpack-dev-server

一、Webpack文件监听模式watch

Webpack提供了开启文件监听的模式，在我们的工程代码修改时，会自动重新构建出新的打包文件。

要开启文件监听模式最简单的方法就是在启动的时候加上--watch这个参数

  webpack --watch

我们以一个最简单的例子来学习 github仓库 https://github.com/jruit/webpack-tutorial 的webpack5-1

这个例子的Webpack配置文件我们已经很熟悉了，从a.js作为入口文件打包，a.js的内容很简单，定义一个变量name然后输出。代码如下

  // webpack.config.js
  const path = require('path');

  module.exports = {
    entry: './a.js',
    output: {
      path: path.resolve(__dirname, ''),
      filename: 'bundle.js'
    },
    mode: 'none'
  };

  // a.js
  let name = 'Jack';
  console.log(name);

现在我们在该工程目录下命令行执行npx webpack --watch，这个时候就开启了Webpack的文件监听。仔细观察命令行窗口，会发现Webpack构建信息与以往的不同。

一个是会提示webpack is watching the files；另外一个就是该命令行构建程序不会自动退出，这个时候不能再执行其它命令。

现在我们把a.js里的name变量值由'Jack'改成'Tom'，保存后进行观察。

这个时候Webpack自动进行了重新构建，命令行窗口提示了新的构建信息，hash值也是一个新的。

观察打包后的文件bundle.js也变化了，变量name变成了'Tom'。

Webpack开启的文件监听的方式，除了通过在命令webpack后面加--watch参数的形式，也可以在其配置文件里进行开启。配置文件如何配置在这里就不介绍了，因为我们极少会用到，因为在平时工作中我们用到的是更高级的webpack-dev-server。

二、webpack-dev-server

webpack-dev-server是Webpack官方提供的一个工具，一般也称它为DevServer。安装并使用它后会在本地开启一个web服务器，可以用来处理网络请求。

下面我们来学习它的使用，配套例子是github仓库 https://github.com/jruit/webpack-tutorial 的webpack5-2

这个例子与上面的5-1例子只有2个不同点，一是把工程根目录的index.html重命名为my.html并增加了h1元素标签；二是多安装一个webpack-dev-server包。

webpack-dev-server是一个npm包，我们只需要在命令行执行下面的命令就可以完成安装

  npm i -D webpack-dev-server@3.11.0

另外，我们也需要安装webpack以及webpack-cli

  npm install --save-dev webpack@4.43.0    webpack-cli@3.3.12    

完成安装后，就可以启动webpack-dev-server了。我们在项目根目录执行npx webpack-dev-server，就启动了webpack-dev-server。

在启动webpack-dev-server时，它会自动帮我们启动webpack并读取本地的webpack配置文件，同时它会启用webpack的文件监听模式。

我们观察命令行终端信息，它提示:

  Project is running at http://localhost:8080/
  webpack output is served from /
  ...

它告诉我们工程正运行在本地localhost的8080端口下，webpack的输出目录'/'被服务器加载。

我们在chrome打开http://localhost:8080/，显示如下

webpack-dev-server服务器默认使用工程根目录的index.html作为首页，现在工程根目录没有index.html文件，所以服务器加载的网页信息是工程目录。

我们把my.html重命名为index.html，在手动刷新浏览器，就可以看到网页正常显示index.html内容了。

同时也可以看到a.js里的name变量值'Tom'在打包后，打印在开发者工具控制台。

为了观察文件监听以及浏览器的自动刷新是否有效，我们把a.js里的Tom修改为Jack保存。这个时候你会发现http://localhost:8080/的页面立即进行了自动刷新，并且控制台打印出Jack。

小结

本节主要讲了Webpack的文件监听模式和webpack-dev-server。webpack-dev-server会自动开启文件监听模式，并且支持浏览器自动刷新等高级功能，所以在工作中我们一般会使用它。webpack-dev-server还有模块热替换和支持source map等高级的功能，我们会在后续章节讲解 https://www.jiangruitao.com/webpack/source-map/。