本教程详细介绍了如何使用Webpack 5配置项目，以同时生成JavaScript和CSS的压缩（.min）和未压缩版本。文章将重点讲解如何利用`TerserPlugin`和`CssMinimizerPlugin`进行选择性优化，并通过`MiniCssExtractPlugin`正确处理CSS文件的提取与命名冲突，并提供完整的配置示例及常见问题解决方案。
在现代Web开发中，为了优化加载性能和方便调试，我们通常需要为静态资源（如JavaScript和CSS）提供两种版本：未压缩的（用于开发和调试）和压缩的（用于生产环境）。Webpack 5作为流行的模块打包工具，提供了强大的配置能力来实现这一目标。本教程将引导您完成配置过程，确保您的项目能够生成符合要求的JavaScript和CSS资产。
1. 理解核心需求与挑战
我们的目标是为每个源文件生成两个输出文件：一个标准版本（例如template.js，template.css）和一个压缩版本（例如template.min.js，template.min.css）。
在处理CSS时，一个常见的挑战是Webpack默认将CSS视为JavaScript模块的一部分。直接在entry中为同一个SCSS文件定义两个输出（如css/template.css和css/template.min.css）会导致“Multiple chunks emit assets to the same filename”的冲突，因为Webpack会尝试将两个入口点打包到同一个CSS文件。此外，如果不正确地处理，未压缩的CSS文件可能会被Webpack打包成一个包含运行时代码的JavaScript文件，而不是纯粹的CSS。
为了解决这些问题，我们将引入特定的Webpack插件和配置策略。
2. 关键Webpack插件介绍
要实现上述目标，我们将主要依赖以下Webpack插件：
- TerserPlugin: Webpack 5 内置的 JavaScript 压缩器，用于压缩 JS 文件。我们可以通过其 include 选项指定只压缩 .min.js 文件。
- CssMinimizerPlugin: 一个专门用于压缩 CSS 文件的 Webpack 插件。与 TerserPlugin 类似，它也支持 include 选项进行选择性压缩。
- MiniCssExtractPlugin: 此插件负责将 CSS 从 JavaScript bundle 中提取到单独的 .css 文件中。这是解决 CSS 文件打包冲突和生成纯 CSS 文件的关键。
- CopyPlugin: 用于将非模块化的静态文件（如HTML、XML、图片等）从源目录复制到输出目录。
3. 配置 webpack.config.js
以下是实现目标所需的完整webpack.config.js配置：
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 引入 MiniCssExtractPlugin
const dist_path = path.resolve(__dirname, 'dist');
const media_root_path = 'media/templates/site/tofu';
module.exports = {
// devtool: 'source-map', // 根据需要启用或禁用 Source Map
// 1. 定义入口点：为每个资源定义压缩和未压缩的入口
entry: {
'js/template': './src/js/template.js',
'js/template.min': './src/js/template.js',
'css/template': './src/scss/template.scss',
'css/template.min': './src/scss/template.scss',
},
// 2. 配置输出
output: {
path: dist_path,
// 使用 [name].js 确保 JavaScript 文件以 .js 结尾
// CSS 文件的输出由 MiniCssExtractPlugin 控制
filename: `${media_root_path}/[name].js`,
},
// 3. 优化配置：启用最小化并指定压缩器
optimization: {
minimize: true, // 启用最小化
minimizer: [
// 为 .min.js 文件应用 TerserPlugin 压缩
new TerserPlugin({
include: /\.min\.js$/
}),
// 为 .min.css 文件应用 CssMinimizerPlugin 压缩
new CssMinimizerPlugin({
include: /\.min\.css$/
})
],
},
// 4. 模块规则：处理不同类型的文件
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [], // 如果需要Babel等，可在此处添加 loader
},
{
test: /\.s[ac]ss$/i, // 匹配 .scss 或 .sass 文件
use: [
// MiniCssExtractPlugin.loader 负责将 CSS 提取到单独的文件
MiniCssExtractPlugin.loader,
// css-loader 解析 CSS 中的 @import 和 url()
"css-loader",
{
// sass-loader 将 Sass/SCSS 编译为 CSS
loader: "sass-loader",
options: {
implementation: require("sass"), // 优先使用 dart-sass
sassOptions: {
outputStyle: 'expanded' // 输出未压缩的 CSS 样式
}
},
},
],
},
],
},
// 5. 插件配置
plugins: [
// 复制静态文件
new CopyPlugin({
patterns: [
{ from: path.resolve(__dirname, 'src/index.php'), to: path.resolve(dist_path, 'index.php') },
{ from: path.resolve(__dirname, 'src/joomla.asset.json'), to: path.resolve(dist_path, 'joomla.asset.json') },
{ from: path.resolve(__dirname, 'src/templateDetails.xml'), to: path.resolve(dist_path, 'templateDetails.xml') },
{ from: path.resolve(__dirname, 'src/images'), to: path.resolve(dist_path, media_root_path, 'images') },
],
}),
// 配置 MiniCssExtractPlugin，指定 CSS 文件的输出路径和命名
new MiniCssExtractPlugin({
filename: `${media_root_path}/[name].css`, // 使用 [name].css 确保 CSS 文件以 .css 结尾
})
],
// 6. 统计信息配置（可选）
stats: {
loggingDebug: ['sass-loader']
},
};4. 配置详解
4.1 入口点 (entry)
为每个需要生成压缩和未压缩版本的资源定义两个入口点。例如：
- 'js/template': './src/js/template.js'：生成未压缩的 template.js。
- 'js/template.min': './src/js/template.js'：生成压缩的 template.min.js。
- 'css/template': './src/scss/template.scss'：生成未压缩的 template.css。
- 'css/template.min': './src/scss/template.scss'：生成压缩的 template.min.css。
这里的关键是使用不同的名称（如 template 和 template.min）来区分输出文件，即使它们指向相同的源文件。
4.2 输出 (output)
output.filename 配置用于控制 JavaScript 文件的输出路径和命名。注意，CSS 文件的输出是由 MiniCssExtractPlugin 单独控制的。
output: {
path: dist_path,
filename: `${media_root_path}/[name].js`,
},这里 [name] 将被入口点的键替换，例如 js/template 或 js/template.min。
4.3 优化 (optimization)
- minimize: true: 启用 Webpack 的默认最小化功能。
- minimizer: 这是一个数组，用于指定自定义的压缩器。
- TerserPlugin: 配置 include: /\.min\.js$/ 确保只有名称中包含 .min.js 的 JavaScript 文件才会被压缩。
- CssMinimizerPlugin: 配置 include: /\.min\.css$/ 确保只有名称中包含 .min.css 的 CSS 文件才会被压缩。
通过这种方式，我们实现了选择性压缩，未压缩的资产将保持原始状态。
4.4 模块规则 (module.rules)
- JavaScript 规则: 简单地处理 .js 文件。如果需要转译ES6+语法，可以在 use 数组中添加 babel-loader。
-
SCSS/Sass 规则:
- test: /\.s[ac]ss$/i: 匹配 .scss 或 .sass 文件。
- use: 这是一个 loader 链，从右到左执行。
- sass-loader: 将 Sass/SCSS 代码编译成 CSS。outputStyle: 'expanded' 选项确保原始 CSS 输出是未压缩的。
- css-loader: 解析 CSS 中的 @import 和 url()，并将其转换为 require/import 语句。
- MiniCssExtractPlugin.loader: 这个 loader 是 MiniCssExtractPlugin 的一部分，它负责将 css-loader 处理后的 CSS 模块提取到单独的 .css 文件中，而不是将其嵌入到 JavaScript bundle 中。
4.5 插件 (plugins)
- CopyPlugin: 负责复制静态文件，例如模板文件、配置文件和图片等。
- MiniCssExtractPlugin: 这个插件实例用于配置最终 CSS 文件的输出。
new MiniCssExtractPlugin({ filename: `${media_root_path}/[name].css`, })这里的 filename 同样使用 [name].css，它会根据入口点（例如 css/template 或 css/template.min）生成相应的 template.css 和 template.min.css 文件。
5. 解决遗留问题：CSS目录中的JS存根文件
尽管上述配置能够正确生成所需的 .js、.min.js、.css 和 .min.css 文件，但由于Webpack的打包机制，为CSS入口点 (css/template, css/template.min) 也会生成空的或包含少量运行时代码的 .js 文件存根（例如 dist/media/templates/site/tofu/css/template.js 和 dist/media/templates/site/tofu/css/template.min.js）。这些文件通常是无用的，并且可能导致混淆。
一个简单的解决方案是在构建完成后手动删除这些文件。这可以通过在 package.json 的 scripts 中添加一个 rm 命令来实现：
{
"name": "your-project",
"version": "1.0.0",
"scripts": {
"build": "webpack --mode production && rm -rf dist/media/templates/site/tofu/css/template*.js"
},
"devDependencies": {
// ...
}
}运行 npm run build 命令时，它会先执行 Webpack 打包，然后删除 dist/media/templates/site/tofu/css/ 目录下所有以 template 开头并以 .js 结尾的文件。
6. 总结与注意事项
通过以上配置，您可以成功地使用 Webpack 5 生成 JavaScript 和 CSS 的压缩与未压缩版本。
关键点回顾：
- 多入口点策略：为每个资源的压缩和未压缩版本定义不同的 entry 名称。
- 选择性压缩：利用 TerserPlugin 和 CssMinimizerPlugin 的 include 选项，精确控制哪些文件需要被压缩。
- CSS 提取：使用 MiniCssExtractPlugin 将 CSS 从 JS bundle 中分离出来，并控制其输出文件名。
- 后期清理：通过构建脚本中的 rm 命令清除不必要的 JS 存根文件。
注意事项：
- Source Map: 根据您的开发和生产环境需求，合理配置 devtool 选项。例如，在生产环境中可能需要更精简的 Source Map 或完全禁用。
- 性能考量: 为每个资源创建多个入口点会增加 Webpack 的处理时间。对于大型项目，可以考虑更高级的策略，例如使用不同的 Webpack 配置文件（一个用于开发，一个用于生产），或者使用更复杂的脚本来动态生成配置。
- Loader 顺序: module.rules 中的 use 数组顺序至关重要，loader 是从右到左执行的。
- Webpack 版本: 本教程基于 Webpack 5。如果您使用的是旧版本，某些配置可能需要调整。
遵循本教程的指导，您将能够高效地管理和优化您的前端静态资源，为不同环境提供最合适的版本。
