webpack 生产环境构建全攻略
🎯 引言
学会这篇文章，你可以掌握如何用 webpack 打包生产环境的代码，让你的前端项目体积更小、运行更快、结构更清晰。生产环境构建不仅仅是简单地打包，还涉及到代码压缩、环境变量配置、多环境切换以及构建结果分析，这些都是提升项目性能和维护性的关键。
🛠️ 使用 TerserPlugin 压缩 JS
在生产环境中，JavaScript 代码的体积会直接影响页面加载速度。TerserPlugin 是 webpack 默认的 JS 压缩插件，它可以帮我们极大地减小 JS 文件大小。
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
mode: 'production',
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // 去除 console.log
},
},
}),
],
},
};
drop_console: true 非常实用，能自动移除代码中的所有 console.log，避免生产环境日志泄露。💅 使用 css-minimizer-webpack-plugin 压缩 CSS
CSS 文件也需要压缩，减少网络传输时间。css-minimizer-webpack-plugin 专门用来压缩 CSS，配合 MiniCssExtractPlugin 提取出的 CSS 文件使用。
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
mode: 'production',
optimization: {
minimizer: [
'...', // 继承默认的 JS 压缩插件
new CssMinimizerPlugin(),
],
},
};
'...' 来保留 webpack 默认的 JS 压缩，否则只有 CSS 会被压缩。🎨 提取 CSS 为独立文件（MiniCssExtractPlugin）
默认情况下，CSS 会被打包进 JS 文件，加载效率不高，且不利于缓存。用 MiniCssExtractPlugin 可以把 CSS 抽离成独立文件，浏览器可以并行加载。
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
MiniCssExtractPlugin.loader, // 抽离 CSS
'css-loader',
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css', // 增加内容哈希，方便缓存
}),
],
};
[contenthash]，避免文件名重复导致浏览器缓存失效。🌿 设置环境变量（DefinePlugin, .env 文件、cross-env）
前端项目通常需要根据环境加载不同配置。webpack 通过 DefinePlugin 注入环境变量，同时可以配合 .env 文件和 cross-env 脚本实现跨平台的环境设置。
1. 使用 DefinePlugin
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'process.env.API_URL': JSON.stringify(process.env.API_URL),
}),
],
};
2. 通过 .env 文件管理变量
在项目根目录创建 .env.production 和 .env.development 文件，写入不同环境变量。
# .env.production
API_URL=https://api.example.com
3. 使用 cross-env 实现跨平台设置
在 package.json 脚本中：
"scripts": {
"build:prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js",
"build:dev": "cross-env NODE_ENV=development webpack --config webpack.dev.js"
}
cross-env 让你不用关心 Windows 和 Linux/macOS 的环境变量写法差异，非常方便。🌍 构建多环境配置（webpack.prod.js, webpack.dev.js）
为了区分开发和生产环境，常见做法是拆分配置文件，具体到 webpack.prod.js 和 webpack.dev.js，然后用 webpack-merge 进行合并。
module.exports = {
entry: './src/index.js',
module: {
/* 公共 Loader */
},
plugins: [
/* 公共插件 */
],
};
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = merge(common, {
mode: 'production',
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
plugins: [new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' })],
optimization: {
minimize: true,
minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
},
});
devtool，热更新，避免压缩，方便调试。📊 使用 Webpack Bundle Analyzer 分析构建结果
构建完成后，了解打包文件体积分布非常重要，webpack-bundle-analyzer 可以帮你生成可视化报告。
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'static', // 生成静态 HTML 文件
openAnalyzer: false, // 不自动打开浏览器
reportFilename: 'bundle-report.html',
}),
],
};
运行构建后，打开 bundle-report.html，你能清晰看到每个模块的体积占比，方便进一步优化。
🧾 小节总结
- 配置
TerserPlugin和css-minimizer-webpack-plugin，可压缩 JS 和 CSS，提高加载效率。 - 使用
MiniCssExtractPlugin把 CSS 抽离成独立文件，利用浏览器缓存和并行加载优势。 - 通过
DefinePlugin和.env文件结合cross-env，实现灵活的多环境变量管理。 - 采用多环境配置文件，如
webpack.prod.js与webpack.dev.js，保证配置简洁、清晰。 - 使用
webpack-bundle-analyzer生成可视化报告，帮助分析和优化包体积。
❓ 知识问答（Q&A）
Q：为什么要把 CSS 提取成独立文件？
A：CSS 独立文件可以被浏览器并行加载，提高页面渲染速度，还能更好地利用缓存，减少重复下载。
Q：DefinePlugin 和 .env 有什么区别？
A：DefinePlugin 是 webpack 内置用来定义全局常量的插件，.env 文件是存储环境变量的文件，通常结合工具读取 .env 并传给 DefinePlugin。
Q：构建体积过大怎么办？
A：可以用 webpack-bundle-analyzer 先查看包体积分布，再采用代码拆分、按需加载等策略优化。
🧪 小练习
练习一：配置生产环境压缩
请基于以下代码，实现生产环境下 JS 和 CSS 的压缩，并抽离 CSS。
// webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
// 补充代码，实现 JS 和 CSS 压缩以及 CSS 抽离
});
练习二：多环境变量配置
基于 DefinePlugin 和 .env 文件，写出一个简单的生产环境配置，能让代码中访问 process.env.API_URL。
// webpack.prod.js
const webpack = require('webpack');
module.exports = {
// 补充代码，实现环境变量注入
};
🎉 恭喜你已经掌握 webpack 生产环境构建中压缩、提取 CSS、多环境配置及构建分析的核心技能啦！继续保持实战练习，前端打包优化路上越走越顺！