Skip to content

Commit

Permalink
Merge branch 'master' into hot-module-reloading
Browse files Browse the repository at this point in the history
# Conflicts:
#	README.md
#	package-lock.json
#	src/loader.js
  • Loading branch information
ScriptedAlchemy committed Apr 8, 2019
2 parents d9ebdc5 + 7f4159e commit 641bdce
Show file tree
Hide file tree
Showing 17 changed files with 497 additions and 1,230 deletions.
54 changes: 48 additions & 6 deletions README.md
Expand Up @@ -35,6 +35,13 @@ npm install --save-dev mini-css-extract-plugin

### Configuration

#### `publicPath`

Type: `String|Function`
Default: the `publicPath` in `webpackOptions.output`

Specifies a custom public path for the target file(s).

#### Minimal example

**webpack.config.js**
Expand Down Expand Up @@ -72,6 +79,45 @@ module.exports = {
}
```

#### `publicPath` function example

**webpack.config.js**

```js
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"
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: (resourcePath, context) => {
// 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) + '/'
},
}
},
"css-loader"
]
}
]
}
}
```

#### 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`.
Expand Down Expand Up @@ -169,17 +215,13 @@ While webpack 5 is likely to come with a CSS minimizer built-in, with webpack 4
**webpack.config.js**

```js
const UglifyJsPlugin = require("uglifyjs-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 UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new TerserJSPlugin({}),
new OptimizeCSSAssetsPlugin({})
]
},
Expand Down

0 comments on commit 641bdce

Please sign in to comment.