のextract-text-webpack-pluginのインストールと使用
Installation Use Extract Text Webpack Plugin
プラグインへのextract-text-webpack-pluginは、主にデタッチスタイルのcss、jsが、無秩序現象によって引き起こされるページスタイルのロードのスタイルでパッケージ化されるのを防ぎます。
npm i extract-text-webpack-plugin -D
最初にプロジェクトのルートディレクトリに移動し、次に上記のコマンドを実行してプラグインをインストールします。インストールが完了したら、プラグインをwebpack.config.jsに導入する必要があります。
const ExtractTextPlugin = require('extract-text-webpack-plugin') module.exports = { module: { rules: [ { test: /.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) } ] }, plugins: [ new ExtractTextPlugin('styles.css'), ] }
プラグインには次の3つのパラメータがあります重要性
use: What kind of loader refers to the need to compile files here since the source file is .css so I chose css-loader fallback: After compiling css file to extract what loader publicfile: items used to cover the path to generate the file path css
ポイントをパッケージ化するwebpack環境最適化:cssスタイルコードが引き出されました。
引き出された場合、bundle.jsで見つけることができますcssコードはパターンに変換されますノードは本体に挿入されますこのプロセスは次のとおりです:スタイルローダーがhtmlファイルに挿入されます外部css、css css-コンテンツ解析を使用したローダー、変換js webpackはjsファイルのみを認識するため、ファイルをに追加します。
css分離:
extract-text-webpack-pluginプラグインを使用します-主にcssスタイルを削除し、jsにロードされたページスタイルの現象によって引き起こされる混乱を防ぐためにパッケージをスタイルします。
利点
非jsファイルは個別にパッケージ化され、jsファイルによって記述され、ブラウザのキャッシュを単独で作成するために使用できます。
プラグインエラーを使用する場合、現在ほとんどのプロジェクトまたはwebpack3 +で実際に使用されており、バージョンが指定されていません。デフォルトでnpmバージョン4.0.0がインストールされています。
エラー:Chunk.entrypoints:Chunks.groupsIterableを使用し、代わりにEntrypointのインスタンスでフィルタリングします
理由:
extract-text-webpack-pluginは、webpack4.0.0バージョン以降をサポートできません。
解決:
npm install –save-dev root @ xxxxx
+ root @xxxxxにダウンロードされます
その後、通常の状態にパックされます