一、公共路径

通过 publicPath 来指定应用程序中所有资源的基础路径。

module.exports = {
    output: {
        publicPath: 'http://localhost:8080'
    },
}

二、环境变量

1. 基本使用

Webpack 命令行环境配置的 --env 参数，可以允许你传入任意数量的环境变量。而在 webpack.config.js 中可以访问到这些环境变量。

npx webpack --env production

同时，module.exports 要改成一个函数，接收环境变量 env：

module.exports = (env) => {
    return {
        // 根据命令行参数 env 来设置不同环境的 mode
        mode: env.production ? 'production' : 'development',
    }
}

2. 压缩 JavaScript

配置环境变量后，当执行 npx webpack --env production 时，Webpack 会自动压缩 JavaScript 代码，这得益于 Webpack 开箱即用的 terser-webpack-plugin 插件。

但是，如果使用了 optimization.minimizer 压缩了其他资源，如 CSS：

const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')

module.exports = {
    optimization: {
        minimizer: [new CssMinimizerWebpackPlugin()],
    }
}

此时要想压缩 JavaScript，也要用 optimization.minimizer 进行配置：

npm i terser-webpack-plugin -D

const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')

module.exports = (env) => {
    return {
        mode: env.production ? 'production' : 'development',
        optimization: {
            minimizer: [new CssMinimizerWebpackPlugin(), new TerserWebpackPlugin()]
        },
    }
}

注意，只有在生产环境（npx webpack --env production），Webpack 才会对代码进行压缩。

三、拆分配置文件

在 config 目录下创建 webpack.config.dev.js（开发环境配置）和 webpack.config.prod.js（生产环境配置）两个文件，之后要在不同环境打包编译时，可以运行以下两个命令：

# 开发环境
npx webpack -c ./config/webpack.config.dev.js    # -c 表示 --config，用于指定配置文件

# 生产环境
npx webpack -c ./config/webpack.config.prod.js

四、npm 脚本

在 package.json 中配置脚本简化命令，这时可以省略 npx：

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

# 开发环境
npm run start

# 生产环境
npm run build

五、提取公共配置并合并配置文件

将 webpack.config.dev.js（开发环境配置）和 webpack.config.prod.js（生产环境配置）中公共的代码提取到 webpack.config.common.js，并将 webpack.config.dev.js 和 webpack.config.prod.js 中公共的代码删除，留下不同的配置。

此时我们有了三个配置文件，使用 webpack-merge 将配置进行合并：

npm install webpack-merge -D

webpack.config.js：

const { merge } = require('webpack-merge')
const commonConfig = require('./webpack.config.common.js')
const productionConfig = require('./webpack.config.prod.js')
const developmentConfig = require('./webpack.config.dev.js')

module.exports = (env) => {
    switch (true) {
        case env.development:
            return merge(commonConfig, developmentConfig)
        case env.production:
            return merge(commonConfig, productionConfig)
        default:
            throw new Error('No matching configuration was found!');
    }
}

10. 拆分开发环境和生产环境配置