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

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

我希望有以下步骤：

将所有SCS合并为CSS（bundle.CSS）

最小化步骤1的输出（bundle.min.css）

嵌入步骤2中的所有图像（bundle.b64.min.css）

嵌入步骤3中的所有字体（bundle.bs64.fonts.min.css）

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

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

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

---

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

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

因此步骤如下：

将所有scss文件捆绑到1 bundle.css中

确保此捆绑包已缩小

为映像添加要构建的资产管理

为字体添加要生成的资产管理

重要的事情：

此工作流基本上是按配置构建的。使用

package.json

文件配置npm脚本，使用

config.webpack.js

配置webpack。这将允许您只需运行1个命令来构建项目：

npm run build

注意：为了简单起见，我将忽略生产/开发/etc环境，只关注单个环境

package.json

：

这用于设置在终端中输入

npm run build

时实际运行的命令（当然是从项目

dir

）

由于我们现在避免使用不同的环境，并且您不使用Typescript，因此这是一个非常简单的配置：

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

这就是你要补充的。现在听起来很愚蠢，但当项目变得更复杂时，你会喜欢这些脚本，所以最好开始制作它们

webpack.config.js

： 主要提升将在此配置文件中进行。这基本上告诉webpack在运行它时要做什么（这就是

npm run build

所做的）

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

• npm安装--保存dev文件加载器

• npm安装--保存开发人员html网页包插件

• npm安装--保存dev mini-css提取插件

注意，我添加了htmlWebpackPlugin，因为它使自动引用正确的散列包变得更容易。此外，我假设该应用程序是react应用程序，但您只需将入口点更改为应用程序加载的位置即可

这是很难做到的飞行没有测试出来的东西，但我希望这给你足够的参考，你应该改变和做什么，以开始与它

---

我再次强烈推荐

webpack.js

，它们非常全面，一旦你开始掌握窍门，事情就会开始顺利进行。

你想将资产（图像等）捆绑到一个单一的捆绑css文件中吗？（我不知道这是否可能）。我使用文件加载器加载文件。另外：

：警告：由于webpack v4，提取文本webpack插件不应用于css。请使用迷你css提取插件。

请不要使用文档中的插件。

webpackjs

文档中详细介绍了您提到的内容，包括指南和插件参考。对于步骤1和2，您需要插件

mini-css-extract-plugin

对于步骤3和步骤4，您需要使用

文件加载器处理资产。这两个插件位于
webpackjs
文档中。对于您的第一个问题：是的，我希望这样做（这可能吗？）。对于我当前的代码，我也在使用文件加载器。第二：谢谢你让我知道！（我正在使用迷你css提取插件）。我明白你的意思。我可以通过运行不同的脚本来生成步骤。但我希望能一次完成所有4个步骤。你能对此发表评论吗？首先：我不知道是否有可能将资产编译成一个捆绑css文件（可能是，但我没听说过）。秒：你使用的是
config.webpack.js
文件吗？我感谢你的帮助，尽管这对我提出的问题仍然没有帮助，因为这不是我在帖子中提出的问题…我已经阅读了文档并在论坛上搜索了一个解决方案，但只找到了一个解决方案（我在上面发布了），不实用，因为我需要一个具有4种不同配置的阵列。起初我认为这是不可能的，因为我不知道Webpack是否应该以这种方式工作……但问一下也无妨，对吧？@yagosansz你能分享一些代码，特别是两个配置文件吗？也许我会更了解你的问题。您提到了4个脚本，但尚未共享它们。这会有帮助的。
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'
    }),
  ]
};