Webpack 4 构建大型项目实践 / 开发服务

本文所用示例的仓库地址： gayhub

上一节我们把 vue 全家桶加入到项目，并成功打包部署，但在实现过程中不止一次想到：不基于 Webpack 构建开发时，我的改动能很直观的就在浏览器中看到（只需要刷新一下浏览器），但现在你告诉我改动后需要打包才能看到结果，我的开发体验呢？

本节就将通过使用 webpack-dev-server 来解决这个问题，并且在体验上会比以前更好，因为连刷新浏览器都不需要你做了。

watch

在介绍 webpack-dev-server 之前，我们其实还有一种不完善的方法来处理开发环境调试的问题，那就是 Webpack 的 watch 选项联合使用 vue-router 的 hash 模式。

使用 watch 选项时， Webpack 会启动一个服务监听文件的变化，在文件变化后重新执行 webpack 打包指令。 vue-router 的 hash 模式又能保证，你可以用 file 协议访问 index.html 来查看页面展示。所以在文件修改且打包完成后，刷新浏览器就能看到修改后的页面内容，和原始的开发体验类似。

webpack.config.js

module.exports = {
  watch: true
}
复制代码

但既然有更好的调试方式，我们自然要继续学下去。

webpack-dev-server

webpack-dev-server 是 Webpack 官方的 工具 依赖，用启动一个开发服务，它有监听文件变化、热模块替换、代理请求等功能，极大程度方便开发者的调试工作（ vue-cli 的 dev 命令就是使用 webpack-dev-server）。

yarn add webpack-dev-server -D
复制代码

npx webpack-dev-server
复制代码

命令行可以看到此时启动的服务信息， Webpack 执行打包并且启动了一个静态资源访问服务，端口为 8080 （ 8080 端口未被占用的情况下）。在没有对配置进行任何修改的情况下，开发服务启动且功能正常，因为 webpack-dev-server 默认配置正在生效。我们可以通过在 Webpack 配置文件中增加 devServer 选项来自定义 webpack-dev-server 的配置，下面将介绍常用配置项。

• devServer.host 指定开发服务的 IP ，或者叫做主机地址，默认 localhost 。

• devServer.port 指定开发服务的端口，默认 8080

• devServer.open 开发服务启动后，是否在浏览器打开服务地址，默认 false

• devServer.index 索引文件名，默认 index.html

• devServer.compress 是否启用 gzip 压缩，默认 true

• devServer.hot 是否启用热模块替换，也就是修改代码后不需你手动刷新浏览器，浏览器加载差异内容自动替换，默认 true

• devServer.hotOnly 热模块替换功能失败时是否刷新浏览器，默认 true

• devServer.https 是否启用 https 协议，默认 false

• devServer.inline

  是否启用内联模式，默认 true

  推荐使用 模块热替换 的内联模式，因为它包含来自 websocket 的 HMR 触发器。轮询模式可以作为替代方案，但需要一个额外的入口点：'webpack/hot/poll?1000'

• devServer.clientLogLevel

  string: 'none' | 'info' | 'error' | 'warning'

  日志打印等级，默认 info ，一般设置为 none ，否则控制台会有很多干扰信息（热加载的一些信息）

• devServer.stats

  string: 'none' | 'errors-only' | 'minimal' | 'normal' | 'verbose' object

  命令行显示 bundle 信息的等级，一般设置为 minimal

• devServer.proxy 设置 API 代理， 默认 {}

然后我们把上方的常用配置，写到配置文件里

devServer: {
    open: true,
    compress: true,
    port: 9002,
    hot: true,
    hotOnly: false,
    historyApiFallback: true, // 任意的 404 响应都被替代为 index.html
    clientLogLevel: 'none',
    stats: 'minimal',
    inline: true,
    proxy: {
      '/api': {
        target: 'http://0.0.0.0:8081/',
        pathRewrite: {
          '/api': ''
        }
      }
    }
  }
复制代码

配置规范

npm scripts

上方在使用 webpack-dev-server 命令的时候我有用到 npx ， 因为 webpack-dev-server 依赖是安装在项目目录下的，而不是全局，所以需要使用 npx 来调用项目 node_modules/.bin 目录下的 webpack-dev-server.cmd 。那现在我们有了两个命令 webpack / webpack-dev-server ，且随着项目的持续开发命令会变得更多，所以我们需要把命令维护到 package.json 中，方便自己使用也让项目更容易理解（ npm run [script] ）。

npx 命令是 npm 在 5.2 版本更新的一个命令

npm scripts 会优先调用 node_modules/.bin 中的命令

package.json

{
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

复制代码

配置文件变动

在这之前我们把配置信息都写在了默认的配置文件 webpack.config.js 中，但现在出现两个模式的配置（生产和开发），再维护在一个文件里边就显得比较臃肿且蠢（两个模式需要分别优化打包），所以我们把配置文件的结构也做一些改进。

• 环境配置、公共配置分离

  webpack.base.conf.js
  webpack.prod.conf.js
  webpack.dev.conf.js
  

• 工具函数分离

  比如我之前的配置中经常使用到 path.resolve(__dirname, './xx') ，这其实可以剥离为公共函数

  • utils.js 工具函数

• 增加对外接口

  • build.js 根据环境信息选用配置文件

• 增加配置文件

  • config.js 设定一些常见的配置开关

• 增加 clean-webpack-plugin

  用于每次打包时清空 \dist 目录

  yarn add clean-webpack-plugin -D
  复制代码

  const CleanWebpackPlugin = require('clean-webpack-plugin')
  // ...
  module.exports = {
    plugins: [
      new CleanWebpackPlugin(['dist'], {
        root: resolve('')
      })
    ]
  }
  复制代码

• 修改 npm scripts

  {
    "scripts": {
      "dev": "webpack-dev-server --progress --config build/build.js",
      "build": "node build/build.js production",
      "test": "echo \"Error: no test specified\" && exit 1"
    }
  }
  复制代码

具体改动请参考 Github 中本节提供的例子