-
-
-
+This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.
-
-
-
+It builds on top of a new webpack v4 feature (module types) and requires webpack 4 to work.
-
-
-
+Compared to the extract-text-webpack-plugin:
-
-
-
-
-
-
-
-
+- Async loading
+- No duplicate compilation (performance)
+- Easier to use
+- Specific to CSS
+
+## Getting Started
+
+To begin, you'll need to install `extract-css-chunks-webpack-plugin`:
+
+```bash
+npm install --save-dev extract-css-chunks-webpack-plugin
+```
+
+It's recommended to combine `extract-css-chunks-webpack-plugin` with the [`css-loader`](https://github.com/webpack-contrib/css-loader)
+
+Then add the loader and the plugin to your `webpack` config. For example:
+
+**style.css**
+
+```css
+body {
+ background: green;
+}
+```
+
+**component.js**
-
πΎπΎπΎIt's our absolute pleasure to announce Webpack 4 Support πππ
+```js
+import './style.css';
+```
-> **HEADLINES (May 2018): Now Independently supports Webpack 4:**
-Yep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course!
+**webpack.config.js**
-So... why did we rebuild `extract-css-chunks`? What does it offer?
+```js
+const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
-It's got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits.
+module.exports = {
+ plugins: [new ExtractCssChunks()],
+ module: {
+ rules: [
+ {
+ test: /\.css$/i,
+ use: [ExtractCssChunks.loader, 'css-loader'],
+ },
+ ],
+ },
+};
+```
-Compared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:
+## Options
-## Perks
-* **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!
-* cacheable stylesheets
-* smallest total bytes sent compared to "render-path" css-in-js solutions that include your CSS definitions in JS
-* Faster than the V2!
-* Async loading
-* No duplicate compilation (performance)
-* Easier to use
-* Specific to CSS
-* SSR Friendly development build, focused on frontend DX
-* Works seamlessly with the Universal family
-* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)
+### `publicPath`
-Additionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.
+Type: `String|Function`
+Default: the `publicPath` in `webpackOptions.output`
+
+Specifies a custom public path for the target file(s).
+
+#### `String`
+
+**webpack.config.js**
-The functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.
+```js
+const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
-## Webpack 4 Standalone Installation:
+module.exports = {
+ plugins: [
+ new ExtractCssChunks({
+ // Options similar to the same options in webpackOptions.output
+ // both options are optional
+ filename: '[name].css',
+ chunkFilename: '[id].css',
+ }),
+ ],
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ {
+ loader: ExtractCssChunks.loader,
+ options: {
+ publicPath: '/public/path/to/',
+ },
+ },
+ 'css-loader',
+ ],
+ },
+ ],
+ },
+};
+```
-If you are just looking for something that works like `mini-css-extract-plugin` but with HMR, then look no further.
+#### `Function`
-NOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin`
+**webpack.config.js**
-**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - it's that easy**
+```js
+const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
+module.exports = {
+ plugins: [
+ new ExtractCssChunks({
+ // Options similar to the same options in webpackOptions.output
+ // both options are optional
+ filename: '[name].css',
+ chunkFilename: '[id].css',
+ }),
+ ],
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ {
+ loader: ExtractCssChunks.loader,
+ options: {
+ publicPath: (resourcePath, context) => {
+ return path.relative(path.dirname(resourcePath), context) + '/';
+ },
+ },
+ },
+ 'css-loader',
+ ],
+ },
+ ],
+ },
+};
```
-yarn add --dev extract-css-chunks-webpack-plugin
+
+### `esModule`
+
+Type: `Boolean`
+Default: `false`
+
+By default, `extract-css-chunks-webpack-plugin` generates JS modules that use the CommonJS modules syntax.
+There are some cases in which using ES modules is beneficial, like in the case of [module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).
+
+You can enable a ES module syntax using:
+
+**webpack.config.js**
+
+```js
+const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
+
+module.exports = {
+ plugins: [new ExtractCssChunks()],
+ module: {
+ rules: [
+ {
+ test: /\.css$/i,
+ use: [
+ {
+ loader: ExtractCssChunks.loader,
+ options: {
+ esModule: true,
+ },
+ },
+ 'css-loader',
+ ],
+ },
+ ],
+ },
+};
```
-*webpack.config.js:*
+## Examples
+
+### Minimal example
+
+**webpack.config.js**
+
```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
+
module.exports = {
plugins: [
- new MiniCssExtractPlugin({
+ new ExtractCssChunks({
// Options similar to the same options in webpackOptions.output
// all options are optional
filename: '[name].css',
@@ -84,12 +213,12 @@ module.exports = {
test: /\.css$/,
use: [
{
- loader: MiniCssExtractPlugin.loader,
+ loader: ExtractCssChunks.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: '../',
- hot: process.env.NODE_ENV === 'development',
+ hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
@@ -100,25 +229,16 @@ module.exports = {
};
```
-*webpack.server.config.js*
-
-The server needs to be handled differently, we still want one chunk. Luckily webpack 4 supports **LimitChunkCountPlugin**
-
-```js
-new webpack.optimize.LimitChunkCountPlugin({
- maxChunks: 1
-})
-```
-
-#### `publicPath` function example
+### The `publicPath` option as function
**webpack.config.js**
```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
+
module.exports = {
plugins: [
- new MiniCssExtractPlugin({
+ new ExtractCssChunks({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
@@ -131,7 +251,7 @@ module.exports = {
test: /\.css$/,
use: [
{
- loader: MiniCssExtractPlugin.loader,
+ loader: ExtractCssChunks.loader,
options: {
publicPath: (resourcePath, context) => {
// publicPath is the relative path of the resource to the context
@@ -149,7 +269,7 @@ module.exports = {
};
```
-#### Advanced configuration example
+### Advanced configuration example
This plugin should be used only on `production` builds without `style-loader` in the loaders chain, especially if you want to have HMR in `development`.
@@ -160,12 +280,12 @@ Here is an example to have both HMR in `development` and your styles extracted i
**webpack.config.js**
```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
const devMode = process.env.NODE_ENV !== 'production';
module.exports = {
plugins: [
- new MiniCssExtractPlugin({
+ new ExtractCssChunks({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: devMode ? '[name].css' : '[name].[hash].css',
@@ -178,9 +298,9 @@ module.exports = {
test: /\.(sa|sc|c)ss$/,
use: [
{
- loader: MiniCssExtractPlugin.loader,
+ loader: ExtractCssChunks.loader,
options: {
- hot: process.env.NODE_ENV === 'development',
+ hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
@@ -193,19 +313,24 @@ module.exports = {
};
```
-#### Hot Module Reloading (HMR)
+### Hot Module Reloading (HMR)
-extract-mini-css-plugin supports hot reloading of actual css files in development. Some options are provided to enable HMR of both standard stylesheets and locally scoped CSS or CSS modules. Below is an example configuration of mini-css for HMR use with CSS modules.
+The `extract-css-chunks-webpack-plugin` supports hot reloading of actual css files in development.
+Some options are provided to enable HMR of both standard stylesheets and locally scoped CSS or CSS modules.
+Below is an example configuration of mini-css for HMR use with CSS modules.
-While we attempt to hmr css-modules. It is not easy to perform when code-splitting with custom chunk names. `reloadAll` is an option that should only be enabled if HMR isn't working correctly. The core challenge with css-modules is that when code-split, the chunk ids can and do end up different compared to the filename.
+While we attempt to hmr css-modules. It is not easy to perform when code-splitting with custom chunk names.
+`reloadAll` is an option that should only be enabled if HMR isn't working correctly.
+The core challenge with css-modules is that when code-split, the chunk ids can and do end up different compared to the filename.
**webpack.config.js**
```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
+
module.exports = {
plugins: [
- new MiniCssExtractPlugin({
+ new ExtractCssChunks({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
@@ -218,10 +343,10 @@ module.exports = {
test: /\.css$/,
use: [
{
- loader: MiniCssExtractPlugin.loader,
+ loader: ExtractCssChunks.loader,
options: {
// only enable hot in development
- hot: process.env.NODE_ENV === 'development',
+ hmr: process.env.NODE_ENV === 'development',
// if hmr does not work, this is a forceful method.
reloadAll: true,
},
@@ -236,20 +361,22 @@ module.exports = {
### Minimizing For Production
-To minify the output, use a plugin like [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin). Setting `optimization.minimizer` overrides the defaults provided by webpack, so make sure to also specify a JS minimizer:
+To minify the output, use a plugin like [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin).
+Setting `optimization.minimizer` overrides the defaults provided by webpack, so make sure to also specify a JS minimizer:
**webpack.config.js**
```js
const TerserJSPlugin = require('terser-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+
module.exports = {
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
plugins: [
- new MiniCssExtractPlugin({
+ new ExtractCssChunks({
filename: '[name].css',
chunkFilename: '[id].css',
}),
@@ -258,338 +385,246 @@ module.exports = {
rules: [
{
test: /\.css$/,
- use: [MiniCssExtractPlugin.loader, 'css-loader'],
+ use: [ExtractCssChunks.loader, 'css-loader'],
},
],
},
};
```
+### Using preloaded or inlined CSS
-### What about Webpack 3?
-This is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications.
-
-There have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading.
-
-If you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `> v3.x.x` is only intended for users with Webpack 4
-
-
-
+The runtime code detects already added CSS via `` or `
+ 
+ 
-
+This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.
-
- 
-
+It builds on top of a new webpack v4 feature (module types) and requires webpack 4 to work.
-
- 
-
+Compared to the extract-text-webpack-plugin:
-
- 
-
-
-
- 
-
-