Install
# for webpack 1
npm install --save-dev extract-text-webpack-plugin
# for webpack 2
npm install --save-dev extract-text-webpack-plugin@beta
Usage
⚠️ For webpack v1, see the README in the webpack-1 branch.
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"),
]
}
It moves every require("style.css")
in entry chunks into a separate CSS file. So your styles are no longer inlined into the JS bundle, but separate in a CSS bundle file (styles.css
). If your total stylesheet volume is big, it will be faster because the CSS bundle is loaded in parallel to the JS bundle.
Advantages | Caveats |
---|---|
Fewer style tags (older IE has a limit) | Additional HTTP request |
CSS SourceMap (with devtool: "source-map" and extract-text-webpack-plugin?sourceMap ) |
Longer compilation time |
CSS requested in parallel | No runtime public path modification |
CSS cached separate | No Hot Module Replacement |
Faster runtime (less code and DOM operations) | ... |
Options
new ExtractTextPlugin(options: filename | object)
Name | Type | Description |
---|---|---|
id |
{String} |
Unique ident for this plugin instance. (For advanced usage only, by default automatically generated) |
filename |
{String} |
Name of the result file. May contain [name] , [id] and [contenthash] |
allChunks |
{Boolean} |
Extract from all additional chunks too (by default it extracts only from the initial chunk(s)) |
disable |
{Boolean} |
Disables the plugin |
ignoreOrder |
{Boolean} |
Disables order check (useful for CSS Modules!), false by default |
[name]
name of the chunk[id]
number of the chunk[contenthash]
hash of the content of the extracted file
⚠️ ExtractTextPlugin
generates a file per entry, so you must use[name]
,[id]
or[contenthash]
when using multiple entries.
#extract
ExtractTextPlugin.extract(options: loader | object)
Creates an extracting loader from an existing loader. Supports loaders of type { loader: [name]-loader -> {String}, options: {} -> {Object} }
.
Name | Type | Description |
---|---|---|
options.use |
{String} /{Array} /{Object} |
Loader(s) that should be used for converting the resource to a CSS exporting module (required) |
options.fallback |
{String} /{Array} /{Object} |
loader(e.g 'style-loader' ) that should be used when the CSS is not extracted (i.e. in an additional chunk when allChunks: false ) |
options.publicPath |
{String} |
Override the publicPath setting for this loader |
Multiple Instances
There is also an extract
function on the instance. You should use this if you have more than one instance of ExtractTextPlugin
.
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// Create multiple instances
const extractCSS = new ExtractTextPlugin('stylesheets/[name].css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name].less');
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
]
};
Extracting Sass or LESS
The configuration is the same, switch out sass-loader
for less-loader
when necessary.
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
module: {
use: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
//resolve-url-loader may be chained before sass-loader if necessary
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'
//})
]
}
Maintainer
![]() Tobias Koppers |