ExtractTextWebpackPlugin

Извлечение текста из пакета или пакетов в отдельный файл.

Установка

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

Использование

:warning: С версии webpack v4, extract-text-webpack-plugin не следует использовать для CSS. Используйте mini-css-extract-plugin вместо этого.

:warning: Для webpack v1 см. README в ветке webpack-1.

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

Он перемещает все необходимые *.css модули в входных пакетах в отдельный файл CSS. Таким образом, ваши стили больше не встроены в пакет JS, а находятся в отдельном файле CSS (styles.css). Если объём вашего стилизованного листа большой, это будет быстрее, так как пакет CSS загружается параллельно пакету JS.

Преимущества	Ограничения
Меньше тегов style (у старого IE есть ограничение) Дополнительный HTTP-запрос	Дополнительный HTTP-запрос
CSS SourceMap (с devtool: "source-map" и extract-text-webpack-plugin?sourceMap) Более длительное время компиляции	Более длительное время компиляции
CSS запрашивается параллельно Отсутствие модификации пути public во время выполнения	Отсутствие модификации пути public во время выполнения
CSS кэшируется отдельно Нет Hot Module Replacement	Нет Hot Module Replacement
Более быстрое время выполнения (меньше кода и операций с DOM) ...	...

Параметры

new ExtractTextPlugin(options: filename | object)

Имя	Тип	Описание
id {String}	{String}	Уникальный идентификатор для этого экземпляра плагина. (Только для расширенного использования, по умолчанию генерируется автоматически)
filename {String\|Function}	{String\|Function}	Имя результирующего файла. Может содержать [name], [id] и [contenthash]
allChunks {Boolean}	{Boolean}	Также извлекать из всех дополнительных пакетов (по умолчанию извлекает только из начального пакета(ов)) При использовании CommonsChunkPlugin и наличии извлечённых пакетов (из ExtractTextPlugin.extract) в общем пакете, allChunks должен быть установлен в значение true
disable {Boolean}	{Boolean}	Отключает плагин
ignoreOrder {Boolean}	{Boolean}	Отключает проверку порядка (полезно для CSS Modules!), по умолчанию false

• [name] имя пакета
• [id] номер пакета
• [contenthash] хэш содержимого извлеченного файла

• [<hashType>:contenthash:<digestType>:<length>] необязательно, вы можете настроить

  • другие hashType, например sha1, md5, sha256, sha512
  • другие digestType, например hex, base26, base32, base36, base49, base52, base58, base62, base64
  • и length, длина хэша в символах

:warning: ExtractTextPlugin генерирует файл на входной пакет, поэтому вам необходимо использовать [name], [id] или [contenthash] при использовании нескольких входных пакетов.

#extract

ExtractTextPlugin.extract(options: loader | object)

Создаёт извлекающий лоадер из существующего лоадера. Поддерживает лоадеры типа { loader: [name]-loader -> {String}, options: {} -> {Object} }.

Имя	Тип	Описание
options.use {String}/{Array}/{Object}	{String} / {Array} / {Object}	Лоадер(ы), который(е) следует использовать для преобразования ресурса в модуль экспорта CSS (обязательно)
options.fallback {String}/{Array}/{Object}	{String} / {Array} / {Object}	лоадер(например 'style-loader' ), который следует использовать, когда CSS не извлекается (т.е. в дополнительном пакете, когда allChunks: false )
options.publicPath {String}	{String}	Переопределяет параметр publicPath для этого лоадера

Несколько экземпляров

У экземпляра также есть функция extract. Вам следует использовать её, если у вас больше одного экземпляра ExtractTextPlugin.

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

Извлечение 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',
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')
    //if you want to pass in options, you can do so:
    //new ExtractTextPlugin({
    //  filename: 'style.css'
    //})
  ]
}

url() Разрешение

Если вы обнаруживаете, что URL не разрешаются должным образом при запуске webpack, вы можете расширить функциональность своего лоадера с помощью параметров. Свойство url: false позволяет разрешать пути без изменений.

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
                loader: 'css-loader',
                options: {
                    // If you are having trouble with urls not resolving add this setting.
                    // See https://github.com/webpack-contrib/css-loader#url
                    url: false,
                    minimize: true,
                    sourceMap: true
                }
            }, 
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: true
                }
            }
          ]
        })
      }
    ]
  }
}

Изменение имени файла

Параметр filename может быть Function. Он передает getPath для обработки формата, например css/[name].css, и возвращает фактическое имя файла, css/js/a.css. Вы можете заменить css/js на css, тогда вы получите новый путь css/a.css.

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