webpack:ExtractTextWebpackPlugin

ExtractTextWebpackPluginのインストール

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

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"),
  ]
}

インスタンスパラメータ

new ExtractTextPlugin(options: filename | object)

名前
を選択します.
説明id {String}
このプラグインインスタンスの唯一のidentです.(詳細用途のみ、デフォルトでは自動生成)filename {String|Function}
ファイルのファイル名を生成します.[name]、[id] and [contenthash]を含む場合がありますallChunks {Boolean}
すべての追加のchunk(additional chunk)から抽出(デフォルトでは、初期chunk(initial chunk)からのみ抽出)CommonsChunkPluginが使用され、共通のchunkに抽出されたchunk(ExtractTextPlugin.extractから)がある場合、allChunks**はtrueに設定する必要があります.disable {Boolean}
プラグインの無効化ignoreOrder {Boolean}
シーケンスチェックを無効にします(CSSモジュールに役立ちます!)、デフォルトfalse

[name] chunkの名前

[id] chunkの数

[contenthash]抽出ファイルの内容から生成するhash

.

[:contenthash::]  optionally you can configure

other  hashType s, e.g.  sha1 ,  md5 ,  sha256 ,  sha512

other  digestType s, e.g.  hex ,  base26 ,  base32 ,  base36 ,  base49 ,  base52 ,  base58 ,  base62 ,  base64

and  length , the length of the hash in chars

:警告:ExtractTextPluginは各エントリchunkに対して対応するファイルを生成するので、複数のエントリchunkを構成する場合は、[name]、[id]、または[contenthash]を使用する必要があります.

extractパラメータ

ExtractTextPlugin.extract(options: loader | object)

既存のloaderから抽出(extract)loaderを作成します.サポートされているloaderタイプ{ loader: [name]-loader -> {String}, options: {} -> {Object} }.
名前
を選択します.
説明options.use {String}/{Array}/{Object}
loaderは、リソースをCSSエクスポートモジュールに変換するために使用されます(必須)options.fallback {String}/{Array}/{Object}
loader(例えば'style-loader')は、CSSが抽出されていない場合(すなわち、allChunks: falseの追加のchunk)に適用される.options.publicPath {String}
このloaderのpublicPath構成を書き換える

複数のインスタンス

1つ以上のExtractTextPlugin例がある場合は、この方法の各例のextract方法を使用します.

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

//       
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
  ]
};

SassまたはLESSの抽出

構成は上記と同様であり、必要に応じてsass-loaderをless-loaderに切り替えることができる.

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //    ，    sass-loader     resolve-url-loader     
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')
    //        ，      ：
    //new ExtractTextPlugin({
    //  filename: 'style.css'
    //})
  ]
}

ファイル名の変更

filenameパラメータは、Functionであってもよい.getPathなどのフォーマットを処理し、実際のファイル名を返します.css/[name].cssをcssに置き換えると、新しいパスcss/jsが得られます.

entry: {
  'js/a': "./a"
},
plugins: [
  new ExtractTextPlugin({
    filename:  (getPath) => {
      return getPath('css/[name].css').replace('css/js', 'css');
    },
    allChunks: true
  })
]