etp

extract-text-plus-webpack-plugin

extract-text-plus-webpack-plugin

Showing:

Popularity

Downloads/wk

168

GitHub Stars

0

Maintenance

Last Commit

6yrs ago

Contributors

1

Package

Dependencies

3

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

extract text plus plugin for webpack

Usage example with css

var ExtractTextPlugin = require("extract-text-plus-webpack-plugin");
module.exports = {
    module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlusPlugin.extract("style-loader", "css-loader") }
        ]
    },
    plugins: [
        new ExtractTextPlusPlugin("styles.css")
    ]
}

It moves every require("style.css") in entry chunks into a separate css output file. So your styles are no longer inlined into the javascript, but separate in a css bundle file (styles.css). If your total stylesheet volume is big, it will be faster because the stylesheet bundle is loaded in parallel to the javascript bundle.

Advantages:

  • Fewer style tags (older IE has a limit)
  • CSS SourceMap (with devtool: "source-map" and css-loader?sourceMap)
  • CSS requested in parallel
  • CSS cached separate
  • Faster runtime (less code and DOM operations)

Caveats:

  • Additional HTTP request
  • Longer compilation time
  • More complex configuration
  • No runtime public path modification
  • No Hot Module Replacement

API

new ExtractPlusTextPlugin([id: string], filename: string, [options])
  • id Unique ident for this plugin instance. (For advanded usage only, by default automatic generated)
  • filename the filename of the result file. May contain [name], [id] and [contenthash].
    • [name] the name of the chunk
    • [id] the number of the chunk
    • [contenthash] a hash of the content of the extracted file
  • options
    • allChunks extract from all additional chunks too (by default it extracts only from the initial chunk(s))
    • allEntries extract from all entries
    • nameFilter file name filter function
    • disable disables the plugin

The ExtractTextPlusPlugin generates an output file per entry, so you must use [name], [id] or [contenthash] when using multiple entries.

ExtractTextPlusPlugin.extract([notExtractLoader], loader, [options])

Creates an extracting loader from an existing loader.

  • notExtractLoader (optional) the loader(s) that should be used when the css is not extracted (i.e. in an additional chunk when allChunks: false)
  • loader the loader(s) that should be used for converting the resource to a css exporting module.
  • options
    • publicPath override the publicPath setting for this loader.

There is also an extract function on the instance. You should use this if you have more than one ExtractTextPlugin.

License

MIT (http://www.opensource.org/licenses/mit-license.php)

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial