Webpackのextract-text-webpack-pluginプラグイン

今日皆さんと分かち合うwebpackのプラグインextract-text-webpack-plugin.まずwebpackのパッケージメカニズムについてお話しします.webpackはもともと.jsファイルしかパッケージ処理できませんが、強力なloaderを通じて、さまざまなタイプのファイルをパッケージ処理することができます.例えば、.cssファイルなどです.
表面上のwebpackはloaderを通じていろいろな書類を梱包することができて、もう完璧です.しかし、いくつかのシーンでも問題があります.例えば、私たちのcssの内容はbundle.jsにパッケージされています.本番環境では、ブラウザのキャッシュを使用してユーザー体験を向上させ、webpackのhashを使用します(通常のjsファイルhashタイプではchunkhashが使用されます).では、私はjs部分のコードを修正すれば、私のcssモジュールも再パッケージされ、cssモジュールとしても内容の修正があります.あるいはcssモジュールのみが修正され、jsモジュールは変更されていませんが、いずれもbundleの中にあるので、修正されていると考えられます.
ソリューション:考え方:cssモジュールとjsモジュールを別々にパッケージ化し、言い換えればcssコードをjsファイルから抽出し、モジュールを個別に出力します.方法:extract-text-webpack-pluginプラグイン用法説明:ExtractTextPlugin基本パラメータ説明:filename:ファイルを生成するファイル名は、[name],[id],[contenthash]allChunksを含むことができる:falseの場合、初期化時に導入されたcssのみが抽出され、allChunksの属性がtrueの場合、非同期導入されたcssも抽出される.ExtractTextPlugin.extract基本パラメータ説明:use:ファイルをコンパイルするためにどのようなloaderが必要かfallback:ここでは抽出しない場合、css publicfileをどのような構成で処理するかを示します:プロジェクトパスを上書きし、このcssファイルを生成するためのファイルパス
上のコード:webpackの構成に次のコードを追加します.

const ExtractTextPlugin = require("extract-text-webpack-plugin");  //   install   
module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        scss: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader!sass-loader' })
                        css: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader' }),
                    }
                }
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({    //css   
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({   //css   
                    fallback: "style-loader",
                    use: ['sass-loader','postcss-loader']
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'css/[name].[contenthash].css',
            allChunks: true
        })
    ]

要点:
1、loaderにおいて、.vue文書に対してもcssの引き抜きを行う..vueアセンブリのすべてのcssも正常に引き抜かれるようにします.2、pluginsのExtractTextPluginのallChunksをtrueに設定し、上のポイント1に合わせて、すべてのvueコンポーネントのcssをスムーズに抽出することができます.
注意:webpack4では、mini-css-extract-pluginで置き換えることを推奨します.mini-css-extract-pluginの使用方法については、次を参照してください.https://www.npmjs.com/package/mini-css-extract-plugin