Skip to content

Commit

Permalink
feat: Add ignoreOrder option (#184)
Browse files Browse the repository at this point in the history 
* feat: Add ignoreOrder option
* fix: do not attempt to reload unrequestable urls
* fix: fix publicPath regression
* fix: enable using plugin without defining options
* fix: downgrading normalize-url
* fix: hmr do not crash on link without href
* fix: hmr reload with invalid link url
* feat: add moduleFilename option
* chore: remove PR template
* docs: updated documentation
  • Loading branch information
@ScriptedAlchemy
ScriptedAlchemy authored Aug 4, 2019
1 parent b7045c5 commit cf9c3ea
Show file tree
Hide file tree
Showing 8 changed files with 1,180 additions and 92 deletions.
4 changes: 0 additions & 4 deletions .github/PULL_REQUEST_TEMPLATE.md
View file

This file was deleted.

204 changes: 179 additions & 25 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,38 +69,37 @@ yarn add --dev extract-css-chunks-webpack-plugin

*webpack.config.js:*
```js
const ExtractCssChunks = require("extract-css-chunks-webpack-plugin")

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// all options are optional
filename: '[name].css',
chunkFilename: '[id].css',
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader:ExtractCssChunks.loader,
options: {
hot: true, // if you want HMR
reloadAll: true, // when desperation kicks in - this is a brute force HMR flag
}
},
"css-loader"
]
}
]
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: '../',
hot: process.env.NODE_ENV === 'development',
},
},
'css-loader',
],
},
],
},
plugins: [
new ExtractCssChunks(
{
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css",
orderWarning: true, // Disable to remove warnings about conflicting order between imports
}
),
]
}
};
```

*webpack.server.config.js*
Expand All @@ -113,6 +112,161 @@ new webpack.optimize.LimitChunkCountPlugin({
})
```

#### `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`.

Here is an example to have both HMR in `development` and your styles extracted in a file for `production` builds.

(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';

module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// 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: {
hot: 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.

**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: {
// only enable hot in development
hot: process.env.NODE_ENV === 'development',
// if hmr does not work, this is a forceful method.
reloadAll: true,
},
},
'css-loader',
],
},
],
},
};
```

### Minimizing For Production

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');
module.exports = {
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
```


### What about Webpack 3?
This is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications.
Expand Down
54 changes: 25 additions & 29 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
],
"main": "dist/cjs.js",
"engines": {
"node": ">= 6.9.0 <7.0.0 || >= 8.9.0"
"node": ">= 6.9.0"
},
"scripts": {
"start": "npm run build -- -w",
Expand All @@ -57,9 +57,7 @@
"ci:coverage": "npm run test:coverage -- --runInBand",
"defaults": "webpack-defaults",
"semantic-release": "npx semantic-release",
"travis": "npm run ci:coverage",
"snyk-protect": "snyk protect",
"prepublish": "npm run snyk-protect"
"travis": "npm run ci:coverage"
},
"files": [
"dist"
Expand All @@ -71,48 +69,46 @@
"loader-utils": "^1.1.0",
"normalize-url": "1.9.1",
"schema-utils": "^1.0.0",
"webpack-external-import": "^0.0.1-beta.16",
"webpack-sources": "^1.1.0"
"webpack-sources": "^1.1.0",
"webpack-external-import": "^0.0.1-beta.19"
},
"devDependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@commitlint/cli": "^7.6.1",
"@commitlint/config-conventional": "^7.6.0",
"@webpack-contrib/defaults": "^4.0.1",
"@babel/cli": "^7.5.0",
"@babel/core": "^7.5.4",
"@babel/preset-env": "^7.5.4",
"@commitlint/cli": "^8.1.0",
"@commitlint/config-conventional": "^8.1.0",
"@webpack-contrib/defaults": "^5.0.2",
"@webpack-contrib/eslint-config-webpack": "^3.0.0",
"acorn": "^6.1.1",
"babel-eslint": "^10.0.1",
"babel-eslint": "^10.0.2",
"babel-jest": "^24.8.0",
"commitlint-azure-pipelines-cli": "^1.0.1",
"commitlint-azure-pipelines-cli": "^1.0.2",
"cross-env": "^5.2.0",
"css-loader": "^2.1.1",
"css-loader": "^3.0.0",
"del": "^4.1.1",
"del-cli": "^1.1.0",
"es-check": "^5.0.0",
"eslint": "^5.16.0",
"eslint-plugin-import": "^2.17.2",
"eslint-plugin-prettier": "^3.1.0",
"file-loader": "^3.0.1",
"husky": "^2.2.0",
"eslint": "^6.0.1",
"eslint-config-prettier": "^6.0.0",
"eslint-plugin-import": "^2.18.0",
"file-loader": "^4.0.0",
"husky": "^3.0.0",
"jest": "^24.8.0",
"jest-junit": "^6.4.0",
"lint-staged": "^8.1.6",
"lint-staged": "^9.2.0",
"memory-fs": "^0.4.1",
"prettier": "^1.17.0",
"snyk": "^1.189.0",
"npm-run-all": "^4.1.5",
"prettier": "^1.18.2",
"standard-version": "^6.0.1",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.3.1"
"webpack": "^4.35.3",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
},
"pre-commit": "lint-staged",
"lint-staged": {
"*.js": [
"eslint --fix",
"git add"
]
},
"snyk": true
}
}
4 changes: 3 additions & 1 deletion src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@ class ExtractCssChunksPlugin {
{
filename: DEFAULT_FILENAME,
moduleFilename: () => this.options.filename || DEFAULT_FILENAME,
ignoreOrder: false,
},
options
);
Expand Down Expand Up @@ -530,7 +531,7 @@ class ExtractCssChunksPlugin {
// use list with fewest failed deps
// and emit a warning
const fallbackModule = bestMatch.pop();
if (this.options.orderWarning) {
if (!this.options.ignoreOrder) {
compilation.warnings.push(
new Error(
`chunk ${chunk.name || chunk.id} [${pluginName}]\n` +
Expand All @@ -544,6 +545,7 @@ class ExtractCssChunksPlugin {
)
);
}

usedModules.add(fallbackModule);
}
}
Expand Down
2 changes: 1 addition & 1 deletion test/cases/css-modules/expected/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

// extracted by extract-css-chunks-webpack-plugin
// extracted by mini-css-extract-plugin
module.exports = {"a-module":"index-a-module","b-module":"index-b-module"};

/***/ })
Expand Down
0 ...h/expected/style.e731d4238835cef7f776.css → ...h/expected/style.35ee3780b5b76904cef5.css
View file
File renamed without changes.
0 ...h/expected/style.3b86f70d4e75f3eedf46.css → ...h/expected/style.ca7d26e87c697b1c7039.css
View file
File renamed without changes.
Loading

0 comments on commit cf9c3ea

Please sign in to comment.