feat: Add ignoreOrder option (#184)

* 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
faceyspacey · Aug 4, 2019 · cf9c3ea · cf9c3ea
1 parent b7045c5
commit cf9c3ea
Show file tree

Hide file tree

Showing 8 changed files with 1,180 additions and 92 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
diff --git a/README.md b/README.md
@@ -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*
@@ -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. 

diff --git a/package.json b/package.json
@@ -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",
@@ -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"
@@ -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
+  }
 }
diff --git a/src/index.js b/src/index.js
@@ -125,6 +125,7 @@ class ExtractCssChunksPlugin {
       {
         filename: DEFAULT_FILENAME,
         moduleFilename: () => this.options.filename || DEFAULT_FILENAME,
+        ignoreOrder: false,
       },
       options
     );
@@ -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` +
@@ -544,6 +545,7 @@ class ExtractCssChunksPlugin {
               )
             );
           }
+
           usedModules.add(fallbackModule);
         }
       }

diff --git a/test/cases/css-modules/expected/main.js b/test/cases/css-modules/expected/main.js
@@ -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"};
 
 /***/ })

diff --git a/...h/expected/style.e731d4238835cef7f776.css → ...h/expected/style.35ee3780b5b76904cef5.css b/...h/expected/style.e731d4238835cef7f776.css → ...h/expected/style.35ee3780b5b76904cef5.css
diff --git a/...h/expected/style.3b86f70d4e75f3eedf46.css → ...h/expected/style.ca7d26e87c697b1c7039.css b/...h/expected/style.3b86f70d4e75f3eedf46.css → ...h/expected/style.ca7d26e87c697b1c7039.css