1

我想让 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 输出多个 CSS 文件（缩小和未缩小）

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

4

1 回答 1

1

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

所以步骤：

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

重要的事情：

此工作流程基本上是通过配置构建的。package.json使用该文件配置 npm 脚本，并使用config.webpack.js. 这将允许您简单地运行 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 指南和文档，它们非常详尽，一旦你开始掌握它，事情就会开始顺利进行。

于 2019-07-23T16:24:13.167 回答