Add extracted loader

weprovide · Feb 23, 2018 · 254b0f0 · 254b0f0
1 parent 355c700
commit 254b0f0
Show file tree

Hide file tree

Showing 3 changed files with 146 additions and 106 deletions.
diff --git a/lib/webpack/config.js b/lib/webpack/config.js
@@ -69,8 +69,7 @@ module.exports = async function() {
   }
 
   const extractSass = new ExtractTextPlugin({
-    filename: '[name].css',
-    disable: isDev
+    filename: '[name].css'
   })
 
   let config = {
@@ -92,69 +91,64 @@ module.exports = async function() {
       rules: [
         {
           test: /\.scss$/,
-          loader: extractSass.extract({
-            use: [
-              {
-                loader: 'css-loader',
-                options: {
-                  minimize: !isDev,
-                  sourceMap: isDev
-                }
-              },
-              {
-                loader: 'postcss-loader',
-                options: {
-                  sourceMap: isDev ? 'inline' : false,
-                  plugins: loader => {
-                    const defaultPlugins = (config = {}) =>
-                      [
-                        config.autoprefixer === false
-                          ? null
-                          : require('autoprefixer')({
-                              browsers: ['last 2 versions', 'IE 11']
-                            }),
-                        config.lost === false ? null : require('lost'),
-                        config['postcss-custom-media'] === false
-                          ? null
-                          : require('postcss-custom-media'),
-                        config['postcss-zindex'] === false
-                          ? null
-                          : require('postcss-zindex'),
-                        config['postcss-discard-duplicates'] === false
-                          ? null
-                          : require('postcss-discard-duplicates'),
-                        config['postcss-unique-selectors'] === false
-                          ? null
-                          : require('postcss-unique-selectors'),
-                        config['postcss-responsive-type'] === false
-                          ? null
-                          : require('postcss-responsive-type')
-                      ].filter(i => i !== null)
-                    // Allow custom PostCSS configuration
-                    if (themeConfig.postCss) {
-                      return themeConfig.postCss(loader, defaultPlugins)
+          loader: [
+            'extracted-loader',
+            ...extractSass.extract({
+              use: [
+                {
+                  loader: 'css-loader',
+                  options: {
+                    minimize: !isDev,
+                    sourceMap: isDev
+                  }
+                },
+                {
+                  loader: 'postcss-loader',
+                  options: {
+                    sourceMap: isDev ? 'inline' : false,
+                    plugins: loader => {
+                      const defaultPlugins = (config = {}) =>
+                        [
+                          config.autoprefixer === false
+                            ? null
+                            : require('autoprefixer')({
+                                browsers: ['last 2 versions', 'IE 11']
+                              }),
+                          config.lost === false ? null : require('lost'),
+                          config['postcss-custom-media'] === false
+                            ? null
+                            : require('postcss-custom-media'),
+                          config['postcss-zindex'] === false
+                            ? null
+                            : require('postcss-zindex'),
+                          config['postcss-discard-duplicates'] === false
+                            ? null
+                            : require('postcss-discard-duplicates'),
+                          config['postcss-unique-selectors'] === false
+                            ? null
+                            : require('postcss-unique-selectors'),
+                          config['postcss-responsive-type'] === false
+                            ? null
+                            : require('postcss-responsive-type')
+                        ].filter(i => i !== null)
+                      // Allow custom PostCSS configuration
+                      if (themeConfig.postCss) {
+                        return themeConfig.postCss(loader, defaultPlugins)
+                      }
+
+                      return defaultPlugins()
                     }
-
-                    return defaultPlugins()
+                  }
+                },
+                {
+                  loader: 'sass-loader',
+                  options: {
+                    sourceMap: isDev
                   }
                 }
-              },
-              {
-                loader: 'sass-loader',
-                options: {
-                  sourceMap: isDev
-                }
-              }
-            ],
-            // Use style-loader in development
-            fallback: {
-              loader: 'style-loader',
-              options: {
-                sourceMap: isDev,
-                importLoaders: 1
-              }
-            }
-          })
+              ]
+            })
+          ]
         },
         {
           test: /\.(jpg|png|gif)$/,

diff --git a/package.json b/package.json
@@ -37,8 +37,9 @@
     "chalk": "^2.1.0",
     "cli-table": "^0.3.1",
     "copy-dir": "^0.3.0",
-    "css-loader": "^0.28.4",
+    "css-loader": "^0.28.10",
     "extract-text-webpack-plugin": "^3.0.0",
+    "extracted-loader": "^1.0.6",
     "file-loader": "^0.11.2",
     "find-up": "^2.1.0",
     "loglevel": "^1.4.1",
@@ -48,17 +49,16 @@
     "node-version": "^1.0.0",
     "postcss-custom-media": "^6.0.0",
     "postcss-discard-duplicates": "^2.1.0",
-    "postcss-loader": "^2.0.6",
+    "postcss-loader": "^2.1.0",
     "postcss-responsive-type": "^1.0.0",
     "postcss-unique-selectors": "^2.0.2",
     "postcss-zindex": "^2.2.0",
     "rimraf": "^2.6.1",
     "sass-loader": "^6.0.6",
-    "style-loader": "^0.18.2",
     "styled-jsx": "^1.0.10",
     "svg-spritemap-webpack-plugin": "^1.0.3",
     "svgo-loader": "^1.2.1",
-    "webpack": "^3.5.5",
+    "webpack": "^3.11.0",
     "webpack-dev-server": "^2.6.0",
     "webpack-format-messages": "^1.0.0"
   },