@@ -35,6 +35,13 @@ npm install --save-dev mini-css-extract-plugin
3535
3636### Configuration
3737
38+ #### ` publicPath `
39+
40+ Type: ` String|Function `
41+ Default: the ` publicPath ` in ` webpackOptions.output `
42+
43+ Specifies a custom public path for the target file(s).
44+
3845#### Minimal example
3946
4047** webpack.config.js**
@@ -72,6 +79,45 @@ module.exports = {
7279}
7380```
7481
82+ #### ` publicPath ` function example
83+
84+ ** webpack.config.js**
85+
86+ ``` js
87+ const MiniCssExtractPlugin = require (" mini-css-extract-plugin" );
88+ module .exports = {
89+ plugins: [
90+ new MiniCssExtractPlugin ({
91+ // Options similar to the same options in webpackOptions.output
92+ // both options are optional
93+ filename: " [name].css" ,
94+ chunkFilename: " [id].css"
95+ })
96+ ],
97+ module: {
98+ rules: [
99+ {
100+ test: / \. css$ / ,
101+ use: [
102+ {
103+ loader: MiniCssExtractPlugin .loader ,
104+ options: {
105+ publicPath : (resourcePath , context ) => {
106+ // publicPath is the relative path of the resource to the context
107+ // e.g. for ./css/admin/main.css the publicPath will be ../../
108+ // while for ./css/main.css the publicPath will be ../
109+ return path .relative (path .dirname (resourcePath), context) + ' /'
110+ },
111+ }
112+ },
113+ " css-loader"
114+ ]
115+ }
116+ ]
117+ }
118+ }
119+ ```
120+
75121#### Advanced configuration example
76122
77123This plugin should be used only on ` production ` builds without ` style-loader ` in the loaders chain, especially if you want to have HMR in ` development ` .
@@ -169,17 +215,13 @@ While webpack 5 is likely to come with a CSS minimizer built-in, with webpack 4
169215** webpack.config.js**
170216
171217``` js
172- const UglifyJsPlugin = require (" uglifyjs -webpack-plugin" );
218+ const TerserJSPlugin = require (" terser -webpack-plugin" );
173219const MiniCssExtractPlugin = require (" mini-css-extract-plugin" );
174220const OptimizeCSSAssetsPlugin = require (" optimize-css-assets-webpack-plugin" );
175221module .exports = {
176222 optimization: {
177223 minimizer: [
178- new UglifyJsPlugin ({
179- cache: true ,
180- parallel: true ,
181- sourceMap: true // set to true if you want JS source maps
182- }),
224+ new TerserJSPlugin ({}),
183225 new OptimizeCSSAssetsPlugin ({})
184226 ]
185227 },
0 commit comments