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提取文本插件輸出多個CSS文件（已縮小和未縮小）

但是，對於我的特定情況，我將必須在數組中而不是單個對象中返回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，因為它使自動引用正確的散列包變得更加容易。 另外，我假設該應用程序是React應用程序，但是您可以將入口點更改為應用程序的加載位置。

如果不進行任何測試，這是很難做到的，但是我希望這可以為您提供足夠的參考，說明您應該進行哪些更改並進行操作。

我再次強烈推薦webpack.js 指南和文檔 ，它們非常詳盡，一旦您掌握了它，一切就會開始順利進行。