webpack4 CSS パッケージ化と圧縮を実装する方法

今回は、webpack4 CSS のパッケージ化と圧縮を実装する方法と、webpack4 CSS のパッケージ化と圧縮を実装するための注意事項を説明します。実際のケースを見てみましょう。

// webpack.config.js
module.exports = {
  // webpack会根据mode进行对Js打包，development压缩，production下面自动压缩，亲测没有问题
  mode: 'development' // production
}

しかし、CSSをjsから分離してパッケージ化するにはどうすればよいでしょうか?

一日中関連する記事を探していましたが、その多くは webpack が CSS 圧縮を自動的にサポートしていると述べていますが、プラグインが必要であると言うものもあり、プラグインを使用してください

optimize-css-assets-。 webpack-plugin
ただし、Npm 公式 Web サイトを読む必要があります

⚠️ webpack v3 以下の場合は、optimize-css-assets-webpack-plugin@3.2.0 を使用してください。バージョン以降は webpack v4 をサポートします。

その方法は、まず optimize-css-assets-webpack-plugin をインストールします

const optimizeCss = require('optimize-css-assets-webpack-plugin');
module.exports = {  
  .....,
  //
  plugins: [
    new optimizeCss({
      assetNameRegExp: /\.style\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorOptions: { discardComments: { removeAll: true } },
      canPrint: true
    }),
  ],
  // 这个还待研究，看字面意思是优化的意思
  optimization: {
    // minimize: true,
    minimizer: [new optimizeCss({})],
  }  
}

他の人が書いた上記のコードも読んだので、「cssnano」パッケージもインストールする必要があります

そして実稼働環境のパッケージ化コマンドを実行します。そうそう、CSS は確かに圧縮されています。しかし、js を見ると圧縮されていません。上記のコードが追加されていない場合、js はデフォルトで確かに圧縮されているので、オンラインで解決策を探しましたが、webpack4 はモードのプロダクションを設定するだけでよいとのことでしたが、圧縮後に CSS JS を圧縮できないという問題が発生したため、プラグイン uglify-webpack-plugin のインストールを続けました。試してみようと思ってJSを圧縮しました

最終的に、問題が解決したことがわかりました。これは単なる私の経験であり、偶然でもありましたが、良い解決策があれば、計画について前向きなメッセージを残してください。 、一緒に進歩し、Webpack を徹底的に理解してください。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Node.jsバッファーの使用の詳細な説明

JSを使用してローカルカメラを呼び出す方法

以上がwebpack4 CSS パッケージ化と圧縮を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。