Skip to content

Commit 641bdce

Browse files
Merge branch 'master' into hot-module-reloading
# Conflicts: # README.md # package-lock.json # src/loader.js
2 parents d9ebdc5 + 7f4159e commit 641bdce

File tree

17 files changed

+497
-1230
lines changed

17 files changed

+497
-1230
lines changed

README.md

+48-6
Original file line numberDiff line numberDiff line change
@@ -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

77123
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
169215
**webpack.config.js**
170216

171217
```js
172-
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
218+
const TerserJSPlugin = require("terser-webpack-plugin");
173219
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
174220
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
175221
module.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

Comments
 (0)