extract-text-webpack-pluginの使用とインストールについて

この記事では、extract-text-webpack-plugin の使い方とインストールについて詳しく紹介します。内容が非常に優れているので、参考にしてください。

extract-text-webpack-plugin このプラグインの主な目的は、CSS スタイルを抽出し、スタイルを js にパッケージ化することによって引き起こされるページ スタイルの読み込み障害を防ぐことです。まず、インストール方法を紹介します。このプラグインの :

npm install extract-text-webpack-plugin --save-dev

# for webpack 2
npm install --save-dev extract-text-webpack-plugin
# for webpack 1
npm install --save-dev extract-text-webpack-plugin@1.0.1

まず、プロジェクトのルート ディレクトリに入り、上記のコマンドを実行してプラグインをインストールします。プラグインのインストールが完了しました。次に行う必要があるのは、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"),
 ]
}

const ExtractTextPlugin = require('extract-text-webpack-plugin');

// Create multiple instances 
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');

module.exports = {
 module: {
  rules: [
   {
    test: /\.css$/,
    use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
   },
   {
    test: /\.less$/i,
    use: extractLESS.extract([ 'css-loader', 'less-loader' ])
   },
  ]
 },
 plugins: [
  extractCSS,
  extractLESS
 ]
};

に導入します。

プラグインには、次の意味を持つ 3 つのパラメーターがあります。

1. use: ソース ファイルが であるため、ファイルをコンパイルするために必要なローダーの種類を指します。 css では、css-loader を選択します。

2. fallback: コンパイル後に CSS を抽出するために使用されるローダーの種類は何ですか? File

3. publicfile: used?プロジェクト パスを上書きし、CSS ファイルのファイル パスを生成します。
   

上記がこの記事の全内容です。皆様の学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

webpack スタイルローディングの実装原理

WebpackのCSSモジュール混合方法

以上がextract-text-webpack-pluginの使用とインストールについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。