Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/webpack-contrib/extract-text-webpack-plugin

[DEPRECATED] Please use https://github.com/webpack-contrib/mini-css-extract-plugin Extracts text from a bundle into a separate file
https://github.com/webpack-contrib/extract-text-webpack-plugin

webpack-plugin

Last synced: about 1 month ago
JSON representation

[DEPRECATED] Please use https://github.com/webpack-contrib/mini-css-extract-plugin Extracts text from a bundle into a separate file

Awesome Lists containing this project

README 

        
# DEPRECATED



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



---



[![npm][npm]][npm-url]

[![node][node]][node-url]

[![deps][deps]][deps-url]

[![tests][tests]][tests-url]

[![coverage][cover]][cover-url]

[![chat][chat]][chat-url]





  

  

    

  

  
Extract Text Plugin


  
Extract text from a bundle, or bundles, into a separate file.





Install



```bash

# for webpack 3

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

# for webpack 2

npm install --save-dev [email protected]

# for webpack 1

npm install --save-dev [email protected]

```



Usage



> :warning: Since webpack v4 the `extract-text-webpack-plugin` should not be used for css. Use [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) instead.



> :warning: For webpack v1, see [the README in the webpack-1 branch](https://github.com/webpack/extract-text-webpack-plugin/blob/webpack-1/README.md).



```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"),

  ]

}

```



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 (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



```js

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\|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 (from `ExtractTextPlugin.extract`) in the commons chunk, `allChunks` **must** be set to `true`|

|**`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

* `[: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



> :warning: `ExtractTextPlugin` generates a file **per entry**, so you must use `[name]`, `[id]` or `[contenthash]` when using multiple entries.



#### `#extract`



```js

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`.



```js

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

  ]

};

```



### Extracting Sass or LESS



The configuration is the same, switch out `sass-loader` for `less-loader` when necessary.



```js

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()` Resolving



If you are finding that urls are not resolving properly when you run webpack. You can expand your loader functionality with options. The `url: false` property allows your paths resolved without any changes.



```js

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

                }

            }

          ]

        })

      }

    ]

  }

}

```



### Modify filename



`filename` parameter could be `Function`. It passes `getPath` to process the format like `css/[name].css` and returns the real file name, `css/js/a.css`. You can replace `css/js` with `css` then you will get the new path `css/a.css`.



```js

entry: {

  'js/a': "./a"

},

plugins: [

  new ExtractTextPlugin({

    filename:  (getPath) => {

      return getPath('css/[name].css').replace('css/js', 'css');

    },

    allChunks: true

  })

]

```



Maintainers



  

    

      

        

        

        Juho Vepsäläinen

      

      

        

        

        Joshua Wiens

      

      

        

        

        Kees Kluskens

      

      

        

        

        Sean Larkin

      

    

  



[npm]: https://img.shields.io/npm/v/extract-text-webpack-plugin.svg

[npm-url]: https://npmjs.com/package/extract-text-webpack-plugin



[node]: https://img.shields.io/node/v/extract-text-webpack-plugin.svg

[node-url]: https://nodejs.org



[deps]: https://david-dm.org/webpack-contrib/extract-text-webpack-plugin.svg

[deps-url]: https://david-dm.org/webpack-contrib/extract-text-webpack-plugin



[tests]: http://img.shields.io/travis/webpack-contrib/extract-text-webpack-plugin.svg

[tests-url]: https://travis-ci.org/webpack-contrib/extract-text-webpack-plugin



[cover]: https://coveralls.io/repos/github/webpack-contrib/extract-text-webpack-plugin/badge.svg

[cover-url]: https://coveralls.io/github/webpack-contrib/extract-text-webpack-plugin



[chat]: https://badges.gitter.im/webpack/webpack.svg

[chat-url]: https://gitter.im/webpack/webpack