本教程详细介绍了如何使用Webpack 5配置项目，以同时生成JavaScript和CSS的压缩（.min）和未压缩版本。文章将重点讲解如何利用`TerserPlugin`和`CssMinimizerPlugin`进行选择性优化，并通过`MiniCssExtractPlugin`正确处理CSS文件的提取与命名冲突，并提供完整的配置示例及常见问题解决方案。
在现代Web开发中，为了优化加载性能和方便调试，我们通常需要为静态资源（如JavaScript和CSS）提供两种版本：未压缩的（用于开发和调试）和压缩的（用于生产环境）。Webpack 5作为流行的模块打包工具，提供了强大的配置能力来实现这一目标。本教程将引导您完成配置过程，确保您的项目能够生成符合要求的JavaScript和CSS资产。
我们的目标是为每个源文件生成两个输出文件：一个标准版本（例如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插件和配置策略。
要实现上述目标，我们将主要依赖以下Webpack插件：
以下是实现目标所需的完整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']
},
};为每个需要生成压缩和未压缩版本的资源定义两个入口点。例如：
这里的关键是使用不同的名称（如 template 和 template.min）来区分输出文件，即使它们指向相同的源文件。
output.filename 配置用于控制 JavaScript 文件的输出路径和命名。注意，CSS 文件的输出是由 MiniCssExtractPlugin 单独控制的。
output: {
path: dist_path,
filename: `${media_root_path}/[name].js`,
},这里 [name] 将被入口点的键替换，例如 js/template 或 js/template.min。
通过这种方式，我们实现了选择性压缩，未压缩的资产将保持原始状态。
new MiniCssExtractPlugin({
filename: `${media_root_path}/[name].css`,
})这里的 filename 同样使用 [name].css，它会根据入口点（例如 css/template 或 css/template.min）生成相应的 template.css 和 template.min.css 文件。
尽管上述配置能够正确生成所需的 .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 结尾的文件。
通过以上配置，您可以成功地使用 Webpack 5 生成 JavaScript 和 CSS 的压缩与未压缩版本。
关键点回顾：
注意事项：
遵循本教程的指导，您将能够高效地管理和优化您的前端静态资源，为不同环境提供最合适的版本。
以上就是如何使用Webpack 5生成压缩与未压缩的静态资源的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
726
收藏
