ホームページ > ウェブフロントエンド > jsチュートリアル > WebpackでCSSスタイルを抽出する方法

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

php中世界最好的语言
リリース: 2018-06-13 11:38:44
オリジナル
1856 人が閲覧しました

今回は、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート