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. フォント用にビルドするアセット管理を追加する

重要事項:

このワークフローは、基本的に構成によって構築されます。ファイルを使用して npm スクリプトを構成しpackage.json、 を使用して webpack を構成します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 に答える