如何使用 Webpack 同时构建压缩版（ minified ）和未压缩版（ uncompressed ）的打包文件？

在使用webpack创建压缩和未压缩的捆绑包的过程中，我们可以通过配置webpack的配置文件来实现。以下是具体的步骤和示例：

1. 安装必要的依赖

首先，确保已经安装了Node.js和npm。然后在项目目录中，安装webpack和webpack-cli：

bash
npm install --save-dev webpack webpack-cli

2. 基本配置文件

在项目的根目录下创建一个名为 webpack.config.js 的文件，这将是webpack的配置文件。我们需要导出一个配置对象：

javascript
const path = require('path');

module.exports = {
    entry: './src/index.js', // 入口文件
    output: {
        filename: 'bundle.js', // 输出的文件名
        path: path.resolve(__dirname, 'dist'), // 输出路径
    },
    mode: 'none', // 默认不启用任何优化选项
};

3. 设置多种模式

为了同时生成压缩和未压缩的包，我们可以通过环境变量来控制打包模式。修改 webpack.config.js 文件，添加环境变量的支持：

javascript
module.exports = (env) => {
    return {
        entry: './src/index.js',
        output: {
            filename: env.production ? 'bundle.min.js' : 'bundle.js',
            path: path.resolve(__dirname, 'dist'),
        },
        mode: env.production ? 'production' : 'development',
    };
};

4. 修改 package.json 脚本

在 package.json 文件中，我们可以添加两个脚本来分别打包压缩和未压缩的版本：

json
"scripts": {
    "build": "webpack --env.production",
    "dev": "webpack --env.development"
}

5. 运行构建

• 运行 npm run dev 将生成未压缩的 bundle.js。
• 运行 npm run build 将生成压缩的 bundle.min.js。

示例解释

在这个配置中：

• mode: 'production' 会自动启用压缩（使用TerserPlugin等）。
• mode: 'development' 提供了源映射支持且不压缩代码，便于调试。
• env.production 和 env.development 是通过脚本传入的环境变量，告诉webpack使用哪种模式。

通过这种设置，你可以灵活地控制输出的文件和压缩级别，非常适合开发环境和生产环境的不同需求。