本教程详细阐述如何使用 webpack 5 高效配置前端项目，以同时生成 javascript 和 css 文件的压缩版（.min）和非压缩版。我们将重点介绍 minicssextractplugin 和自定义 minimizer 的应用，解决常见的输出冲突问题，并优化构建流程，确保输出资源的准确性和可用性。
在现代前端开发中，同时生成资源的压缩版（例如 template.min.js、template.min.css）和非压缩版（例如 template.js、template.css）是一种常见且推荐的做法。这种策略带来了多方面的好处：
本教程将以一个 Joomla 4 模板项目为例，指导您如何使用 Webpack 5 实现这一目标。
在 Webpack 中同时生成同一源文件的压缩与非压缩版本，尤其是对于 CSS 文件，可能会遇到以下挑战：
为解决这些问题，我们将采用以下关键工具和策略：
立即学习“前端免费学习笔记（深入）”；
以下是实现上述目标的 webpack.config.js 详细配置步骤。
首先，确保您的项目具有以下基本结构，并且已安装必要的 Webpack 及其相关插件：
your-project/ ├── src/ │ ├── js/ │ │ └── template.js │ ├── scss/ │ │ └── template.scss │ ├── index.php │ ├── joomla.asset.json │ ├── templateDetails.xml │ └── images/ ├── dist/ (构建输出目录) ├── webpack.config.js └── package.json
安装所需依赖：
npm install -D webpack webpack-cli copy-webpack-plugin terser-webpack-plugin css-minimizer-webpack-plugin mini-css-extract-plugin sass sass-loader css-loader
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");
const dist_path = path.resolve(__dirname, 'dist');
const media_root_path = 'media/templates/site/tofu'; // Joomla 模板的媒体根路径
module.exports = {
// devtool: 'source-map', // 可选：启用 Source Map 以便调试
// 1. 入口 (Entry) 配置
entry: {
'js/template': './src/js/template.js', // 非压缩 JS
'js/template.min': './src/js/template.js', // 压缩 JS
'css/template': './src/scss/template.scss', // 非压缩 CSS
'css/template.min': './src/scss/template.scss',// 压缩 CSS
},
// 2. 输出 (Output) 配置
output: {
path: dist_path,
// 对于 JS 文件，使用 [name].js 格式，[name] 会根据 entry 中的键生成
filename: `${media_root_path}/[name].js`,
},
// 3. 模块规则 (Module Rules)
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [], // 如果需要 Babel 转译，可以在这里添加 'babel-loader'
},
{
test: /\.s[ac]ss$/i, // 匹配 .scss 或 .sass 文件
use: [
// 提取 CSS 到单独文件，而不是注入到 JS 中
MiniCssExtractPlugin.loader,
// 解析 CSS 中的 @import 和 url()
"css-loader",
{
// 编译 Sass 到 CSS
loader: "sass-loader",
options: {
implementation: require("sass"), // 推荐使用 dart-sass
sassOptions: {
outputStyle: 'expanded' // 确保 Sass 编译为非压缩格式，后续由 CssMinimizerPlugin 处理压缩
}
},
},
],
},
],
},
// 4. 优化 (Optimization) 配置
optimization: {
minimize: true, // 启用最小化
minimizer: [
// JS 压缩器，只对名称中包含 '.min.js' 的文件进行压缩
new TerserPlugin({
include: /\.min\.js$/
}),
// CSS 压缩器，只对名称中包含 '.min.css' 的文件进行压缩
new CssMinimizerPlugin({
include: /\.min\.css$/
})
],
},
// 5. 插件 (Plugins) 配置
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') },
],
}),
// 提取 CSS 文件，并使用 [name].css 格式输出
new MiniCssExtractPlugin({
filename: `${media_root_path}/[name].css`,
})
],
// 6. 统计信息配置 (可选)
stats: {
loggingDebug: ['sass-loader']
},
};入口 (Entry) 配置：
输出 (Output) 配置：
模块规则 (Module Rules)：
优化 (Optimization) 配置：
插件 (Plugins) 配置：
为了便于调试，建议启用 Source Map。您可以在 module.exports 对象中添加 devtool: 'source-map'。这将为您的构建输出生成对应的 .map 文件。
module.exports = {
devtool: 'source-map', // 启用 Source Map
// ... 其他配置
};由于 Webpack 的设计机制，即使 MiniCssExtractPlugin 成功提取了 CSS 文件，Webpack 仍然会为那些最初被视为 JavaScript 入口点的 CSS 源文件（例如 css/template 和 css/template.min）生成空的或包含少量引导代码的 .js 文件（例如 dist/media/templates/site/tofu/css/template.js 和 dist/media/templates/site/tofu/css/template.min.js）。这些文件通常是无用的“存根”。
为了保持输出目录的整洁，您可以在构建完成后手动删除这些残留的 .js 文件。这通常通过在 package.json 的构建脚本中添加 rm 命令来实现：
{
"name": "your-project",
"version": "1.0.0",
"scripts": {
"build": "webpack --mode production && rm -rf dist/media/templates/site/tofu/css/*.js"
},
"devDependencies": {
// ...
}
}执行 npm run build 命令时，Webpack 将首先构建项目，然后 rm -rf dist/media/templates/site/tofu/css/*.js 命令会删除 dist/media/templates/site/tofu/css/ 目录下所有多余的 .js 文件。
示例中的 media_root_path (media/templates/site/tofu) 是 Joomla 模板的典型路径结构。在实际项目中，请根据您的模板名称和结构调整此路径，确保资源被部署到正确的位置。
在更复杂的项目中，通常会为开发环境和生产环境使用不同的 Webpack 配置。例如，开发环境可能不需要最小化，但需要更快的构建速度和更详细的 Source Map。这可以通过以下方式实现：
通过本教程的配置，您已成功设置 Webpack 5，能够从相同的源代码同时生成 JavaScript 和 CSS 的压缩版与非压缩版。关键在于：
这种配置方式不仅提高了开发效率，也为生产环境提供了优化的前端资源，是现代前端工程实践中的重要一环。
以上就是Webpack 5 配置指南：同时生成压缩与非压缩前端资源的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
726
收藏
