一、前言

上一篇讲到 [Tree Shaking] 相关的内容，本篇将介绍在不同模式（或称环境）下的打包处理。

二、不同环境下的打包配置

1 . 开发环境的配置

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  // 模式
  mode: 'development',
  // 性能优化 (tree shaking)
  optimization: {
    usedExports: true
  },
  // source-map
  devtool: 'eval-cheap-module-source-map',
  // 入口文件
  entry: './src/index.js',
  // 开发服务器
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    compress: true,
    port: 8080,
    open: true,
    hot: 'only'
  },
  // 输出文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    assetModuleFilename: 'assets/[name]_[hash][ext]',
    clean: true,
  },
  // 模块
  module: {
    rules: [
      {
        test: /\.js$/i,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
        sideEffects: true
      }
      // ...
    ]
  },
  // 插件
  plugins: [
    new HTMLWebpackPlugin({
      template: './src/index.html'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
};

2 . 生产环境的配置

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 模式
  mode: 'production',
  // source-map
  devtool: 'nosources-source-map',
  // 入口文件
  entry: './src/index.js',
  // 输出文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    assetModuleFilename: 'assets/[name]_[hash][ext]',
    clean: true,
  },
  // 模块
  module: {
    rules: [
      {
        test: /\.js$/i,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
        sideEffects: true
      }
      // ...
    ]
  },
  // 插件
  plugins: [
    new HTMLWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

通过观察，我们会发现不同模式下的配置实际上存在了大量的重复代码，那么对于这些重复的代码就需要将它们分离出来共用，提高代码效率。

三、webpack-merge

www.npmjs.com/package/web…[2]

这个插件就可以将不同配置合并在一起，也就是可以将共用的配置和不同模式下的配置进行合并，这样就节约了大量的代码书写。

插件安装：

npm i —save-dev webpack-merge

1 . 共用配置

新建一个文件 webpack.common.config.js（文件名可以自己起），用于编写共用配置。

// webpack.common.config.js
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 入口文件
  entry: './src/index.js',
  // 输出文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    assetModuleFilename: 'assets/[name]_[hash][ext]',
    clean: true,
  },
  // 模块
  module: {
    rules: [
      {
        test: /\.js$/i,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
        sideEffects: true
      }
    ]
  },
  // 插件
  plugins: [
    new HTMLWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

2 . 开发环境的配置

新建文件：webpack.dev.config.js

// webpack.dev.config.js
const path = require('path');
const webpack = require('webpack');
const { merge } = require('webpack-merge'); // 插件引入
const commonConfig = require('./webpack.common.config'); // 引入共用配置

const devConfig = {
  // 模式
  mode: 'development',
  // 性能优化 (tree shaking)
  optimization: {
    usedExports: true
  },
  // source-map
  devtool: 'eval-cheap-module-source-map',
  // 开发服务器
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    compress: true,
    port: 8080,
    open: true,
    hot: true // 代码变化后，自动刷新页面 (该参数可以不用手动添加，它已经被自动应用于 HMR 插件。)
  },
  // 插件
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}

module.exports = merge(commonConfig, devConfig); // 共用配置与开发配置合并

3 . 生产环境的配置

新建文件：webpack.prod.config.js

const { merge } = require('webpack-merge'); // 插件引入
const commonConfig = require('./webpack.common.config'); // 引入共用配置

const prodConfig = {
  mode: 'production',
  devtool: 'nosources-source-map'
};

module.exports = merge(commonConfig, prodConfig); // 共用配置与生产配置合并

四、package.json 的设置

在完成配置以后，我们还需要写一些脚本，方便运行打包。

// package.json
"scripts": {
  "dev": "webpack serve --config ./build/webpack.dev.config.js",
  "build": "webpack --config ./build/webpack.prod.config.js"
}

注意：

1. 一般我们会把两个配置文件放在一个叫做 build 的文件夹中。
2. 配置 dev 和 build 命令时，要看清楚 dev 是需要启动本地服务器的，所以要在 webpack 后面添加 serve；而 build 是生产环境打包，不需要开本地服务器，直接写 webpack 进行打包就行。
3. 记得添加 --config 来自己指定配置文件，同时也要注意文件的路径。

小结

• 安装 webpack-merge
• 在 webpack.common.config.js 中编写共用配置
• 在 webpack.dev.config.js 中编写开发配置，并利用插件与共用配置合并
• 在 webpack.prod.config.js 中编写生产配置，并利用插件与共用配置合并
• 配置完成后，编写 npm 脚本指令
• 更简洁的配置方式可以参考：www.npmjs.com/package/web…[3]
• 也可以看我的仓库：github.com/Knight174/w…[4]

参考资料

[1]https://juejin.cn/post/7004297344300777502: https://juejin.cn/post/7004297344300777502

[2]https://www.npmjs.com/package/webpack-merge: https://link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fwebpack-merge

[3]https://www.npmjs.com/package/webpack-merge: https://link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fwebpack-merge

[4]https://github.com/Knight174/webpack5-learning: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FKnight174%2Fwebpack5-learning