@@ -35,6 +35,13 @@ npm install --save-dev mini-css-extract-plugin
35
35
36
36
### Configuration
37
37
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
+
38
45
#### Minimal example
39
46
40
47
** webpack.config.js**
@@ -72,6 +79,45 @@ module.exports = {
72
79
}
73
80
```
74
81
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
+
75
121
#### Advanced configuration example
76
122
77
123
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 ` .
@@ -169,17 +215,13 @@ While webpack 5 is likely to come with a CSS minimizer built-in, with webpack 4
169
215
** webpack.config.js**
170
216
171
217
``` js
172
- const UglifyJsPlugin = require (" uglifyjs -webpack-plugin" );
218
+ const TerserJSPlugin = require (" terser -webpack-plugin" );
173
219
const MiniCssExtractPlugin = require (" mini-css-extract-plugin" );
174
220
const OptimizeCSSAssetsPlugin = require (" optimize-css-assets-webpack-plugin" );
175
221
module .exports = {
176
222
optimization: {
177
223
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 ({}),
183
225
new OptimizeCSSAssetsPlugin ({})
184
226
]
185
227
},
0 commit comments