本教程详细介绍了如何使用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"); // 引入 MiniCssExtractPluginconst 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。如果您使用的是旧版本，某些配置可能需要调整。
遵循本教程的指导，您将能够高效地管理和优化您的前端静态资源，为不同环境提供最合适的版本。
以上就是如何使用Webpack 5生成压缩与未压缩的静态资源的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1537611.html
微信扫一扫 
支付宝扫一扫 
