Install
@@ -47,15 +46,15 @@ Specifies a custom public path for the target file(s). **webpack.config.js** ```js -const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { plugins: [ new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional - filename: "[name].css", - chunkFilename: "[id].css" - }) + filename: '[name].css', + chunkFilename: '[id].css', + }), ], module: { rules: [ @@ -68,15 +67,15 @@ module.exports = { // you can specify a publicPath here // by default it uses publicPath in webpackOptions.output publicPath: '../', - hmr: process.env.NODE_ENV === 'development' - } + hmr: process.env.NODE_ENV === 'development', + }, }, - "css-loader" - ] - } - ] - } -} + 'css-loader', + ], + }, + ], + }, +}; ``` #### `publicPath` function example @@ -84,15 +83,15 @@ module.exports = { **webpack.config.js** ```js -const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { plugins: [ new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional - filename: "[name].css", - chunkFilename: "[id].css" - }) + filename: '[name].css', + chunkFilename: '[id].css', + }), ], module: { rules: [ @@ -106,16 +105,16 @@ module.exports = { // publicPath is the relative path of the resource to the context // e.g. for ./css/admin/main.css the publicPath will be ../../ // while for ./css/main.css the publicPath will be ../ - return path.relative(path.dirname(resourcePath), context) + '/' + return path.relative(path.dirname(resourcePath), context) + '/'; }, - } + }, }, - "css-loader" - ] - } - ] - } -} + 'css-loader', + ], + }, + ], + }, +}; ``` #### Advanced configuration example @@ -126,12 +125,11 @@ Here is an example to have both HMR in `development` and your styles extracted i (Loaders options left out for clarity, adapt accordingly to your needs.) - **webpack.config.js** ```js -const MiniCssExtractPlugin = require("mini-css-extract-plugin"); -const devMode = process.env.NODE_ENV !== 'production' +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const devMode = process.env.NODE_ENV !== 'production'; module.exports = { plugins: [ @@ -140,50 +138,47 @@ module.exports = { // both options are optional filename: devMode ? '[name].css' : '[name].[hash].css', chunkFilename: devMode ? '[id].css' : '[id].[hash].css', - }) + }), ], module: { rules: [ { test: /\.(sa|sc|c)ss$/, use: [ - { - loader: MiniCssExtractPlugin.loader, - options: { - hmr: process.env.NODE_ENV === 'development' - } - }, + { + loader: MiniCssExtractPlugin.loader, + options: { + hmr: process.env.NODE_ENV === 'development', + }, + }, 'css-loader', 'postcss-loader', 'sass-loader', ], - } - ] - } -} + }, + ], + }, +}; ``` #### 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. - -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 MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { plugins: [ new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional - filename: "[name].css", - chunkFilename: "[id].css" - }) + filename: '[name].css', + chunkFilename: '[id].css', + }), ], module: { rules: [ @@ -196,53 +191,46 @@ module.exports = { // only enable hot in development hmr: process.env.NODE_ENV === 'development', // if hmr does not work, this is a forceful method. - reloadAll: true - } + reloadAll: true, + }, }, - "css-loader" - ] - } - ] - } -} + 'css-loader', + ], + }, + ], + }, +}; ``` - ### Minimizing For Production -While webpack 5 is likely to come with a CSS minimizer built-in, with webpack 4 you need to bring your own. 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 OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); +const TerserJSPlugin = require('terser-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); module.exports = { optimization: { - minimizer: [ - new TerserJSPlugin({}), - new OptimizeCSSAssetsPlugin({}) - ] + minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})], }, plugins: [ new MiniCssExtractPlugin({ - filename: "[name].css", - chunkFilename: "[id].css" - }) + filename: '[name].css', + chunkFilename: '[id].css', + }), ], module: { rules: [ { test: /\.css$/, - use: [ - MiniCssExtractPlugin.loader, - "css-loader" - ] - } - ] - } -} + use: [MiniCssExtractPlugin.loader, 'css-loader'], + }, + ], + }, +}; ``` ### Features @@ -263,7 +251,7 @@ can be extracted in one CSS file using `optimization.splitChunks.cacheGroups`. **webpack.config.js** ```js -const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { optimization: { splitChunks: { @@ -272,28 +260,25 @@ module.exports = { name: 'styles', test: /\.css$/, chunks: 'all', - enforce: true - } - } - } + enforce: true, + }, + }, + }, }, plugins: [ new MiniCssExtractPlugin({ - filename: "[name].css", - }) + filename: '[name].css', + }), ], module: { rules: [ { test: /\.css$/, - use: [ - MiniCssExtractPlugin.loader, - "css-loader" - ] - } - ] - } -} + use: [MiniCssExtractPlugin.loader, 'css-loader'], + }, + ], + }, +}; ``` #### Extracting CSS based on entry @@ -304,7 +289,7 @@ ExtractTextPlugin. ```javascript const path = require('path'); -const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); function recursiveIssuer(m) { if (m.issuer) { @@ -319,43 +304,42 @@ function recursiveIssuer(m) { module.exports = { entry: { foo: path.resolve(__dirname, 'src/foo'), - bar: path.resolve(__dirname, 'src/bar') + bar: path.resolve(__dirname, 'src/bar'), }, optimization: { splitChunks: { cacheGroups: { fooStyles: { name: 'foo', - test: (m,c,entry = 'foo') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry, + test: (m, c, entry = 'foo') => + m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry, chunks: 'all', - enforce: true + enforce: true, }, barStyles: { name: 'bar', - test: (m,c,entry = 'bar') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry, + test: (m, c, entry = 'bar') => + m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry, chunks: 'all', - enforce: true - } - } - } + enforce: true, + }, + }, + }, }, plugins: [ new MiniCssExtractPlugin({ - filename: "[name].css", - }) + filename: '[name].css', + }), ], module: { rules: [ { test: /\.css$/, - use: [ - MiniCssExtractPlugin.loader, - "css-loader" - ] - } - ] - } -} + use: [MiniCssExtractPlugin.loader, 'css-loader'], + }, + ], + }, +}; ``` #### Long Term Caching @@ -373,42 +357,19 @@ If you'd like to extract the media queries from the extracted CSS (so mobile use - [Media Query Plugin](https://github.com/SassNinja/media-query-plugin) - [Media Query Splitting Plugin](https://github.com/mike-diamond/media-query-splitting-plugin) - -Maintainers
- -
-
- 
-
- Tobias Koppers
-
- |
-