Webpack 指南（中）

一. Tree Shaking

• Tree Shaking 描述用于移除 JavaScript 上下文中的未引用代码，它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export
• 使用类似 UglifyJSPlugin 等插件来实现代码压缩与精简
• 安装 uglifyjs-webpack-plugin

npm install uglifyjs-webpack-plugin --save-dev

• 添加到 webpack.config.js 中

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

modules.exports = {
  //...
  plugins: [new UglifyJSPlugin],
};

二. 生产环境构建

• 开发环境（development）与生产环境（production）的构建目标差异很大，所以应当分离出差异的配置，保留通用的配置，使用 webpack-merge 来分别合并环境差异的配置与通用的配置
• 安装 webpack-merge

npm install webpack-merge --save-dev

• 添加 webpack.common.js 表示通用的配置

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js',
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({ title: 'Hello Webpack!' }),
  ],
  output: {
    filename: '[name].[hash:4].js',
    path: path.resolve(__dirname, 'dist'),
  },
};

• 添加 webpack.dev.js 表示开发环境下的独立配置

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
  },
});

• 添加 webpack.prod.js 表示生产环境下的独立配置

const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  devtool: 'source-map',
  plugins: [new UglifyJSPlugin()],
});

• 修改 package.json 的 scripts

"scripts": {
  "start": "webpack-dev-server --open --config webpack.dev.js",
  "build": "webpack --config webpack.prod.js"
},

• 在开发环境时运行 npm run start，Source Map 配置为 inline-source-map 使调试更加清晰，并启用 webpack-dev-server
• 在生产环境时运行 npm run build，Source Map 配置为 source-map 在运行时更为快速，并使用 UglifyJSPlugin 来进行代码压缩
• 经常能见到项目中使用了 process.env.NODE_ENV 这个值，这个值并不是一个变量，而是构建开始之前被静态化编译了，所以需要特定的配置使他生效

// webpack.prod.js
plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify('production'),
    },
  }),
],

• 当在源码中需要区别于开发环境与生产环境的代码时应这样：

if (process.env.NODE_ENV === 'production') {
  // production
} else {
  // development
}

三. 代码分离

1. 多入口

• 使用多个入口的方式来达到分离代码，使用 CommonsChunkPlugin 插件来防止多个入口中代码内使用相同文件的情况，做到去重与分离 chunk
• 配置 webpack.config.js

plugins: [
  new webpack.optimaize.CommonsChunkPlugin({
    name: 'common',
  }),
],

2. 动态导入

• 使用 import() 语法（内部使用 Promise）来动态导入模块
• 首先，应当配置 webpack.config.js 的 output 选项

output: {
  filename: '[name].bundle.js',
  chunkFilename: '[name].bundle.js',
  path: path.resolve(__dirname, 'dist'),
},

• 使用 chunkFilename 来决定非入口 chunk 的名称
• 可以使用 async 函数来搭配石笋 import()，前提是浏览器支持或使用了 babel 等的预处理器

四. 缓存

1. 输出文件名称

• 应当使用 [hash] 或 [chunkhash] 来配置 webpack.config.js 的 output.filename，以确保当文件内容变化后，防止浏览器缓存请求旧的文件而发现不了变化

2. 提取模板

• 使用 CommonsChunkPlugin 可以将 webpack 的样板（boilerplate）和 manifest 提取到单独的包中

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'runtime',
  }),
],

3. 提取 vendor

• 将第三方库（library）（例如 lodash 或 vue）提取到单独的 vendor chunk 文件中，因为它们很少像本地源码一样频繁修改，利用客户端的缓存，减少向服务器获取资源
• 使用一个新的 entry（入口）来配置，并额外配置一个 CommonsChunkPlugin 实例来实现

module.exports = {
  entry: {
    main: './src/index.js',
    vendor: ['lodash'],
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'runtime',
    }),
  ],
};

• 这里引入 runtime 的目的是说明 CommonsChunkPlugin 的 'vendor' 实例必须在 'runtime' 实例之前引入

4. 模块标识符

• 每个 module.id 会基于默认的解析顺序进行增量，也就是说，当解析顺序发生变化，ID 也会随之改变
  • main bundle 会随着自身的新增内容的修改，而发生变化
  • vendor bundle 会随着自身的 module.id 的修改，而发生变化
  • runtime bundle 会因为当前包含一个新模块的引用，而发生变化
• 使用 HashedModuleIdsPlugin 插件在生产环境上

plugins: [
  new webpack.HashedModuleIdsPlugin(),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'runtime',
  }),
],