WebpackでCSSスタイルを抽出する方法

今回は、webpack で css スタイルを抽出する方法と、webpack で css スタイルを抽出する際の注意点について説明します。以下は実際的なケースです。

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ファイルを抽出するために使用されるローダー

3. publicfile: プロジェクトパスを上書きし、CSSファイルのファイルパスを生成するために使用されます

この記事の事例を読んだ後は、PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

ElTableColumn のコンテンツをカスタマイズする方法

小さなプログラムを開発してページを共有した後、ホームページに戻ります

以上がWebpackでCSSスタイルを抽出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。