前面我们讲了常见的构建工具以及其对比，目前而言，最流行的模块化打包工具非 webpack 莫属，webpack 占据了巨大的市场份额。所以本篇文章和下一篇文章主要就 webpack 来给大家分享下如何从开发体验和输出质量两方面来优化项目中的 webpack 配置。

本篇文章我们先来看一下如何优化提升 webpack 的开发体验，优化开发体验主要目的是提升开发效率，让我们不必要每次要去抽一支烟才能等到项目启动或者构建完成。同时，也需要使用工程化的手段避免重复性劳动。下面是本篇文章的脑图（赶紧右键保存下来(づ｡◕‿‿◕｡)づ）

# 优化开发体验

# HMR 模块热替换

模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需刷新浏览器。

在我们平时开发中，最常做的操作就是修改代码，对于网页开发来说，大部分时候都需要我们实时在浏览器中去查看修改的结果。那么，我们就需要等编译完成后手动刷新浏览器，在工程化中，我们完全可以将这些重复的操作使用工程化的能力来帮助我们提效。

相信使用过 webpack 的同学应该都知道 webpack 有一个特别好用的功能：模块热替换(Hot Module Replacement 或 HMR 或热更新)，其可以在监听到本地源文件发生变化的时候，做到不刷新浏览器页面的情况下，将编译好的代码推送到浏览器，然后实时更新内容。

有了模块热替换，我们不仅可以节省实时预览的等待时间，还有一个很重要的原因是在不刷新浏览器页面的情况下，我们就可以尽可能的保存当前页面的运行状态，例如表单的填写和 Redux 状态管理。这样不至于修改一个样式就需要重新填写数据。

模块热替换的原理也很简单，大致步骤如下：

• webpack 在热更新模式下会启动一个 dev 服务器，让浏览器可以请求本地的静态资源，本地 server 启动之后，服务端就会建立一个和客户端之间的长链接（websocket 服务）。
• 每当文件修改后，服务端就会通过长链接向客户端推送消息告诉客户端有源文件进行了修改，你需要接收文件。
• 客户端收到请求之后，重新请求一个 JS 文件，该文件会替换掉 __webpack_modules__ 中的部分代码。

使用 XMR 的姿势 webpack 官网上也介绍的比较详细，大家可以自行查阅，这里就不展开讲了。

# 区分环境

因为我们在开发阶段的目标和代码在生产环境运行的目标是不一致的，所以在我们的项目中，最少是要有两套环境的：即开发环境和生产环境。

在开发阶段，我们要进行开发和调试，这就需要保留错误日志和调试工具。但是在生产环境中，我们需要尽可能缩小代码体积以减少网络传输，并且不应该将一些开发时候的 log 或者报错信息在用户面前展示。比如 React，其在开发环境下会包含类型检查、HTML 检查等针对开发者的警告日志，并会将报错抛出，但是在生产环境下就不会。同时，开发环境和测试环境需要使用的数据也应该是隔离的。

为了更好的复用代码，所以在 webpack 中，可以使用一套源代码，通过设置环境变量输出不同的代码。webpack 可以通过在命令行新增 --env 参数的方式传入环境变量。然后在 webpack.config.js 中可以访问到这些环境变量。相关代码如下：

// 命令行
npx webpack --env goal=local --env production --progress

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

module.exports = (env) => {
  // Use env.<YOUR VARIABLE> here:
  console.log('Goal: ', env.goal); // 'local'
  console.log('Production: ', env.production); // true

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };
};

我们还可以再 package.json 的脚本文件中设置环境变量。

// package.json
{
  ...,
  "scripts": {
    "start": "npm run dev",
    "dev": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.config.js",
    "build:test": "cross-env NODE_ENV=test  webpack --config ./config/webpack.config.js",
    "build:pro": "cross-env NODE_ENV=production  webpack --config ./config/webpack.config.js"
  },
  ...
}

# 提升 webpack 的构建速度

# 构建时间

优化 webpack 构建速度的第一步是要知道构建时间，然后我们才可以具体问题具体分析。我们可以使用 sp