Webpack - 捆绑多个/不同版本的 .css 文件

Question

我想让 Webpack 生成的捆绑的 .css 文件更具可配置性，这样我就可以输出不同的“版本”——基于同一个 .css 文件——让开发人员在未来从事我的项目的生活更加美好更轻松。

我希望有以下步骤：

1. 将所有 SCSS 连接到 CSS (bundle.css)
2. 最小化步骤 1 的输出 (bundle.min.css)
3. 嵌入第 2 步中的所有图像 (bundle.b64.min.css)
4. 嵌入第 3 步中的所有字体 (bundle.bs64.fonts.min.css)

最后 - 在我的构建过程之后 - 我的 dist 文件夹中有 4 个不同的文件。那我可以吗？

按照我目前的做法，我为每个步骤运行不同的脚本 - 删除 dist 文件夹，遍历项目，生成输出。我希望有一个脚本可以一次完成所有操作，而不必遍历我的项目 4 次。

我在这里找到了解决方案：

Webpack Extract-Text-Plugin Output Multiple CSS Files (Both Minified and Not Minified)

但是，对于我的具体情况，我必须在一个数组中返回 4 个不同的配置，而不是单个对象。

Answer 1

好的，根据我们的评论对话，我将为您提供步骤 1-4 的工作流程，但使用常规资产处理，而不是资产捆绑（我没听说过，但也许其他人可以在那里详细说明)。

那么步骤：

1. 将所有 scss 文件打包成 1 个 bundle.css
2. 确保此捆绑包已缩小
3. 添加资产管理以构建图像
4. 添加资产管理以构建字体

重要的事情：

此工作流程基本上是通过配置构建的。用package.json 文件配置npm 脚本，用config.webpack.js 配置webpack。这将允许您简单地运行 1 个命令来构建您的项目：npm run build。 注意：为简单起见，我将忽略生产/开发/等环境并专注于单一环境。

package.json:

这用于设置当您在终端中输入npm run build 时实际运行的命令（当然来自项目dir）。

因为我们现在避免使用不同的环境，而且你没有使用 Typescript，所以这是一个非常简单的配置：

"scripts": {
    "build": "webpack",
  },

这就是您必须添加的全部内容。现在听起来很愚蠢，但是当项目变得更加复杂时，您会喜欢这些脚本，所以最好开始制作它们。

webpack.config.js: 主要提升将在此配置文件中进行。这基本上告诉 webpack 当你运行它时要做什么（这就是 npm run build 正在做的事情）。

首先让我们安装一些插件：

• npm install --save-dev file-loader
• npm install --save-dev html-webpack-plugin
• npm install --save-dev mini-css-extract-plugin

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'production',
  devtool: 'source-map'
  entry: './client/src/app.jsx',
  output: {
    path: path.join(__dirname, 'client/dist/public'),
    filename: 'bundle.[hash].js'
  },
  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: false
            }
          },
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.json', '.jsx']
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './client/src/index_template.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'style.[hash].css',
      chunkFilename: '[id].[hash].css'
    }),
  ]
};

请注意，我添加了 htmlWebpackPlugin，因为它可以更轻松地自动引用正确的散列包。此外，我假设该应用程序是一个反应应用程序，但您可以将入口点更改为您的应用程序加载的位置。

如果不进行测试，这是很难做到的，但我希望这可以为您提供足够的参考，让您了解应该改变什么以及如何去做。

我再次强烈推荐webpack.js guides and documentation，它们非常彻底，一旦你开始掌握它，事情就会开始顺利进行。