- Notifications
You must be signed in to change notification settings - Fork512
[DEPRECATED] Please usehttps://github.com/webpack-contrib/mini-css-extract-plugin Extracts text from a bundle into a separate file
License
webpack-contrib/extract-text-webpack-plugin
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Please use:https://github.com/webpack-contrib/mini-css-extract-plugin
If you have problem(s) with migration on MiniCssExtractPlugin feel free to open issue with reproducible test repo, thanks
# for webpack 3npm install --save-dev extract-text-webpack-plugin# for webpack 2npm install --save-dev extract-text-webpack-plugin@2.1.2# for webpack 1npm install --save-dev extract-text-webpack-plugin@1.0.1
⚠️ Since webpack v4 theextract-text-webpack-pluginshould not be used for css. Usemini-css-extract-plugin instead.
⚠️ For webpack v1, seethe README in the webpack-1 branch.
constExtractTextPlugin=require("extract-text-webpack-plugin");module.exports={module:{rules:[{test:/\.css$/,use:ExtractTextPlugin.extract({fallback:"style-loader",use:"css-loader"})}]},plugins:[newExtractTextPlugin("styles.css"),]}
It moves all the required*.css modules in entry chunks into a separate CSS file. So your styles are no longer inlined into the JS bundle, but in a separate CSS 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 (withdevtool: "source-map" andextract-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) | ... |
newExtractTextPlugin(options:filename|object)
| Name | Type | Description |
|---|---|---|
id | {String} | Unique ident for this plugin instance. (For advanced usage only, by default automatically generated) |
filename | {String|Function} | 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)) When using CommonsChunkPlugin and there are extracted chunks (fromExtractTextPlugin.extract) in the commons chunk,allChunksmust be set totrue |
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[<hashType>:contenthash:<digestType>:<length>]optionally you can configure- other
hashTypes, e.g.sha1,md5,sha256,sha512 - other
digestTypes, e.g.hex,base26,base32,base36,base49,base52,base58,base62,base64 - and
length, the length of the hash in chars
- other
⚠️ ExtractTextPlugingenerates a fileper entry, so you must use[name],[id]or[contenthash]when using multiple entries.
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 whenallChunks: false) |
options.publicPath | {String} | Override thepublicPath setting for this loader |
There is also anextract function on the instance. You should use this if you have more than one instance ofExtractTextPlugin.
constExtractTextPlugin=require('extract-text-webpack-plugin');// Create multiple instancesconstextractCSS=newExtractTextPlugin('stylesheets/[name]-one.css');constextractLESS=newExtractTextPlugin('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]};
The configuration is the same, switch outsass-loader forless-loader when necessary.
constExtractTextPlugin=require('extract-text-webpack-plugin');module.exports={module:{rules:[{test:/\.scss$/,use:ExtractTextPlugin.extract({fallback:'style-loader',use:['css-loader','sass-loader']})}]},plugins:[newExtractTextPlugin('style.css')//if you want to pass in options, you can do so://new ExtractTextPlugin({// filename: 'style.css'//})]}
If you are finding that urls are not resolving properly when you run webpack. You can expand your loader functionality with options. Theurl: false property allows your paths resolved without any changes.
constExtractTextPlugin=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#urlurl:false,minimize:true,sourceMap:true}},{loader:'sass-loader',options:{sourceMap:true}}]})}]}}
filename parameter could beFunction. It passesgetPath to process the format likecss/[name].css and returns the real file name,css/js/a.css. You can replacecss/js withcss then you will get the new pathcss/a.css.
entry:{'js/a':"./a"},plugins:[newExtractTextPlugin({filename:(getPath)=>{returngetPath('css/[name].css').replace('css/js','css');},allChunks:true})]
Juho Vepsäläinen | Joshua Wiens | Kees Kluskens | Sean Larkin |
About
[DEPRECATED] Please usehttps://github.com/webpack-contrib/mini-css-extract-plugin Extracts text from a bundle into a separate file
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.