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 中本节提供的例子

参考文档

• [ Webpack Docs ] devServer