fix bug miniCSSExtract

partyk · May 26, 2020 · a870597 · a870597
1 parent b5028b6
commit a870597
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 44 deletions.
diff --git a/webpack.common.js b/webpack.common.js
@@ -13,18 +13,6 @@ module.exports = merge(
     {
         mode: 'development',
         // a complete list of "stats" setting is on https://webpack.js.org/configuration/stats/
-        stats: {
-            // copied from `'minimal'`
-            all: false,
-            assets: false,
-            modules: true,
-            maxModules: 0,
-            errors: false, // disabled errors
-            warnings: false, // disabled warnings
-            // our additional options
-            moduleTrace: true,
-            errorDetails: true
-        },
         resolve: {
             extensions: ['.vue', '.css', '.tsx', '.ts', '.js', '.json'],
             modules: [
@@ -36,8 +24,8 @@ module.exports = merge(
         },
         plugins: [
             plugins.clean(),
-            plugins.friendlyErrors(),
             plugins.copy(),
+            plugins.miniCssExtract(),
             plugins.imageMin(),
             plugins.iconFont(),
             plugins.webpackBar(),

diff --git a/webpack.dev.js b/webpack.dev.js
@@ -13,6 +13,18 @@ const plugins = require('./webpack/plugins/index');
 
 module.exports = merge(common, {
     mode: 'development',
+    stats: {
+        // copied from `'minimal'`
+        all: false,
+        assets: false,
+        modules: true,
+        maxModules: 0,
+        errors: false, // disabled errors
+        warnings: false, // disabled warnings
+        // our additional options
+        moduleTrace: true,
+        errorDetails: true
+    },
     devtool: 'source-map',
     devServer: {
         contentBase: './dist'
@@ -22,6 +34,7 @@ module.exports = merge(common, {
         ignored: /node_modules/
     },
     plugins: [
+        plugins.friendlyErrors(),
         plugins.bundleAnalyzer() //,
         // plugins.dashboard()
         // plugins.browserSync()

diff --git a/webpack/loaders/webpack.css.js b/webpack/loaders/webpack.css.js
@@ -41,12 +41,5 @@ module.exports = ({include, exclude} = {}) => ({
                 ]
             }
         ]
-    },
-    plugins: [
-        new MiniCssExtractPlugin({
-            filename: 'css/[name].css',
-            chunkFilename: '[id].[hash].css',
-            ignoreOrder: false // Enable to remove warnings about conflicting order
-        })
-    ]
+    }
 });
diff --git a/webpack/loaders/webpack.less.js b/webpack/loaders/webpack.less.js
@@ -5,7 +5,6 @@ const path = require('path');
 const modules = require('./../modules/index');
 
 /* plugins */
-// const plugins = require('./../webpack.plugins');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = ({include, exclude} = {}) => ({
@@ -32,11 +31,14 @@ module.exports = ({include, exclude} = {}) => ({
                             importLoaders: 4,
                             sourceMap: config.isDevelop
                         }
-                    }, /*
-                    {
-                        loader: 'resolve-url-loader'
-                    },*/
+                    },
                     modules.loaderPostCSS(),
+                    /* {
+                        loader: 'resolve-url-loader',
+                        options: {
+                            removeCR: true
+                        },
+                    }, */
                     // modules.loaderIconFont(),
                     {
                         loader: 'less-loader',
@@ -51,12 +53,5 @@ module.exports = ({include, exclude} = {}) => ({
                 ]
             }
         ]
-    },
-    plugins: [
-        new MiniCssExtractPlugin({
-            filename: 'css/[name].css',
-            chunkFilename: 'css/chunks/[id].[hash].css',
-            ignoreOrder: false // Enable to remove warnings about conflicting order
-        })
-    ]
+    }
 });
diff --git a/webpack/loaders/webpack.scss.js b/webpack/loaders/webpack.scss.js
@@ -38,7 +38,10 @@ module.exports = ({include, exclude} = {}) => ({
                         }
                     },
                     {
-                        loader: 'resolve-url-loader'
+                        loader: 'resolve-url-loader',
+                        options: {
+                            removeCR: true
+                        }
                     },
                     modules.loaderPostCSS(),
                     modules.loaderIconFont(),
@@ -51,12 +54,5 @@ module.exports = ({include, exclude} = {}) => ({
                 ]
             }
         ]
-    },
-    plugins: [
-        new MiniCssExtractPlugin({
-            filename: 'css/[name].css',
-            chunkFilename: '[id].[hash].css',
-            ignoreOrder: false // Enable to remove warnings about conflicting order
-        })
-    ]
+    }
 });
diff --git a/webpack/plugins/index.js b/webpack/plugins/index.js
@@ -13,4 +13,5 @@ exports.clean = require('./webpack.clean');
 exports.terser = require('./webpack.terser');
 exports.duplicatePackageChecker = require('./webpack.duplicatePackageChecker');
 exports.bundleAnalyzer = require('./webpack.bundleAnalyzer');
-exports.vueLoader = require('./webpack.vueLoader');
+exports.vueLoader = require('./webpack.vueLoader');
+exports.miniCssExtract = require('./webpack.miniCssExtract');
diff --git a/webpack/plugins/webpack.miniCssExtract.js b/webpack/plugins/webpack.miniCssExtract.js
@@ -0,0 +1,10 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = (options = {}) => {
+    return new MiniCssExtractPlugin({
+        filename: 'css/[name].css',
+        chunkFilename: 'css/chunks/[id].[hash].css',
+        ignoreOrder: false, // Enable to remove warnings about conflicting order,
+        ...options
+    });
+};