feat(build-config): switch to mini-css-extract-plugin

extract-text-webpack-plugin will not support webpack 4 and is in maintenance mode. recommended alternative is mini-css-extract-plugin: webpack-contrib/extract-text-webpack-plugin#731 (comment)
xing · Mar 27, 2018 · d9a303e · d9a303e
1 parent 9792aaf
commit d9a303e
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 43 deletions.
diff --git a/packages/build-config/configs/build.js b/packages/build-config/configs/build.js
@@ -5,7 +5,7 @@ var path = require('path');
 var webpack = require('webpack');
 var StatsWriterPlugin = require('webpack-stats-plugin').StatsWriterPlugin;
 var ServiceWorkerPlugin = require('../plugins/service-worker');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var MiniCSSExtractPlugin = require('mini-css-extract-plugin');
 
 var hopsConfig = require('hops-config');
 
@@ -59,10 +59,9 @@ module.exports = {
   plugins: [
     new StatsWriterPlugin({ fields: null }),
     new ServiceWorkerPlugin(),
-    new ExtractTextPlugin({
-      filename: getAssetPath('[name]-[contenthash:16].css'),
-      allChunks: true,
-      ignoreOrder: true,
+    new MiniCSSExtractPlugin({
+      filename: getAssetPath('[name]-[hash:16].css'),
+      chunkFilename: getAssetPath('[name]-[hash:16].css'),
     }),
     new webpack.HashedModuleIdsPlugin(),
     new webpack.EnvironmentPlugin(

diff --git a/packages/build-config/package.json b/packages/build-config/package.json
@@ -36,12 +36,12 @@
     "babel-preset-react": "^6.24.1",
     "caniuse-lite": "^1.0.30000789",
     "css-loader": "^0.28.8",
-    "extract-text-webpack-plugin": "^4.0.0-alpha.0",
     "file-loader": "^1.1.6",
     "find-up": "^2.1.0",
     "hops-config": "10.3.0-rc.0",
     "loader-utils": "^1.1.0",
     "lodash.template": "^4.4.0",
+    "mini-css-extract-plugin": "^0.2.0",
     "mkdirp": "^0.5.1",
     "pkg-dir": "^2.0.0",
     "postcss": "^6.0.16",

diff --git a/packages/build-config/sections/module-rules/postcss.js b/packages/build-config/sections/module-rules/postcss.js
@@ -4,7 +4,7 @@ var hopsConfig = require('hops-config');
 
 var cssLoader = require.resolve('css-loader');
 var postcssLoader = require.resolve('postcss-loader');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var MiniCSSExtractPlugin = require('mini-css-extract-plugin');
 
 var cssLoaderGlobalOptions = {
   importLoaders: 1,
@@ -33,34 +33,30 @@ exports.build = {
   oneOf: [
     {
       resourceQuery: /global/,
-      use: ExtractTextPlugin.extract({
-        fallback: 'style-loader',
-        use: [
-          {
-            loader: cssLoader,
-            options: cssLoaderGlobalOptions,
-          },
-          {
-            loader: postcssLoader,
-            options: postcssLoaderOptions,
-          },
-        ],
-      }),
+      use: [
+        MiniCSSExtractPlugin.loader,
+        {
+          loader: cssLoader,
+          options: cssLoaderGlobalOptions,
+        },
+        {
+          loader: postcssLoader,
+          options: postcssLoaderOptions,
+        },
+      ],
     },
     {
-      use: ExtractTextPlugin.extract({
-        fallback: 'style-loader',
-        use: [
-          {
-            loader: cssLoader,
-            options: cssLoaderLocalOptions,
-          },
-          {
-            loader: postcssLoader,
-            options: postcssLoaderOptions,
-          },
-        ],
-      }),
+      use: [
+        MiniCSSExtractPlugin.loader,
+        {
+          loader: cssLoader,
+          options: cssLoaderLocalOptions,
+        },
+        {
+          loader: postcssLoader,
+          options: postcssLoaderOptions,
+        },
+      ],
     },
   ],
 };

diff --git a/yarn.lock b/yarn.lock
@@ -386,7 +386,7 @@ async@^1.4.0, async@^1.5.0:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
-async@^2.0.0, async@^2.1.4, async@^2.4.1:
+async@^2.0.0, async@^2.1.4:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
   dependencies:
@@ -2910,15 +2910,6 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-extract-text-webpack-plugin@^4.0.0-alpha.0:
-  version "4.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-4.0.0-beta.0.tgz#f7361d7ff430b42961f8d1321ba8c1757b5d4c42"
-  dependencies:
-    async "^2.4.1"
-    loader-utils "^1.1.0"
-    schema-utils "^0.4.5"
-    webpack-sources "^1.1.0"
-
 [email protected]:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
@@ -5134,6 +5125,13 @@ mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
 
+mini-css-extract-plugin@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.2.0.tgz#7a16b0e1096c86de8e4d1c3b063aa1aeae88d41d"
+  dependencies:
+    loader-utils "^1.1.0"
+    webpack-sources "^1.1.0"
+
 minimalistic-assert@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"