javascript - 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 的工作流程，但要进行常规 Assets 处理，而不是 Assets 捆绑(我没听说过，但也许其他人可以在那里详细说明).

所以步骤:

1. 将所有 scss 文件打包成 1 个 bundle.css
2. 确保这个包被缩小
3. 添加 Assets 管理以构建图像
4. 添加 Assets 管理以构建字体

重要的事情:

此工作流程基本上是通过配置构建的。使用 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，因为它可以更轻松地自动引用正确的散列包。此外，我假设该应用程序是 React 应用程序，但您可以将入口点更改为您的应用程序加载的位置。

如果不进行测试，很难做到这一点，但我希望这能为您提供足够的引用，让您知道应该更改什么以及如何开始使用它。

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