Edit file to adapt to webpack4.x (not done)

Known BUG:
1. Can't load more css files when swtich theme.
2. Unknown causes system instability

Author: harsima

build/utils.js

@@ -1,7 +1,7 @@
 'use strict'
 const path = require('path')
 const config = require('../config')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
 
 exports.assetsPath = function(_path) {
     const assetsSubDirectory = process.env.NODE_ENV === 'production' ?
@@ -34,35 +34,27 @@ exports.cssLoaders = function(options) {
 
     // generate loader string to be used with extract text plugin
     function generateLoaders(loader, loaderOptions) {
-        let loaders = cssLoader
+        let loaders = []
         if (loader) {
-            loaders = {
+            loaders = [{
                 loader: loader + '-loader',
                 options: Object.assign({}, loaderOptions, {
                     sourceMap: options.sourceMap
                 })
-            }
-            // loaders.push({
-            //     loader: loader + '-loader',
-            //     options: Object.assign({}, loaderOptions, {
-            //         sourceMap: options.sourceMap
-            //     })
-            // })
-        } else{
-            return []
+            }]
         }
 
-        // Extract CSS when that option is specified
-        // (which is the case during production build)
         if (options.extract) {
-            return ExtractTextPlugin.extract({
-                use: [loaders, 'postcss-loader'],
-                fallback: 'vue-style-loader',
-                publicPath: '../../'
-            })
+            let extractLoader = {
+                loader: MiniCssExtractPlugin.loader,
+                options: {
+                    // fallback: 'vue-style-loader',
+                    publicPath: '../../'
+                }
+            }
+            return [extractLoader, 'css-loader'].concat(['postcss-loader'], loaders)
         } else {
-            // return ['vue-style-loader'].concat(loaders)
-            return [loaders]
+            return ['vue-style-loader', 'css-loader'].concat(['postcss-loader'], loaders)
         }
     }
 
@@ -84,11 +76,9 @@ exports.styleLoaders = function(options) {
     const loaders = exports.cssLoaders(options)
     for (const extension in loaders) {
         const loader = loaders[extension]
-        const extLoader = ['vue-style-loader', 'css-loader']
-
         output.push({
             test: new RegExp('\\.' + extension + '$'),
-            use: extLoader.concat(loader, ['postcss-loader'])
+            use: loader
         })
     }
     return output

build/webpack.prod.conf.js

@@ -7,17 +7,29 @@ const merge = require('webpack-merge')
 const baseWebpackConfig = require('./webpack.base.conf')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 
+function recursiveIssuer(m) {
+    if (m.issuer) {
+      return recursiveIssuer(m.issuer);
+    } else if (m.name) {
+      return m.name;
+    } else {
+      return false;
+    }
+}
+
 const webpackConfig = merge(baseWebpackConfig, {
     entry: {
         'theme-dark': './src/assets/css/theme-dark.scss',
         'theme-default': './src/assets/css/theme-default.scss'
     },
     module: {
         rules: utils.styleLoaders({
-            sourceMap: config.build.productionSourceMap
+            sourceMap: config.build.productionSourceMap,
+            extract: true
         })
     },
     devtool: config.build.productionSourceMap ? '#source-map' : false,
@@ -31,13 +43,18 @@ const webpackConfig = merge(baseWebpackConfig, {
     // https://github.com/webpack/webpack/issues/6409
     // https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
     optimization: {
-        minimize: true,
-        runtimeChunk: true,
+        minimizer: [
+            // js mini
+            new UglifyJsPlugin({
+              cache: true,
+              parallel: true,
+              sourceMap: config.build.productionSourceMap // set to true if you want JS source maps
+            }),
+            // css mini
+            new OptimizeCSSPlugin({})
+        ],
         splitChunks: {
-            // chunks: "async",
-            // maxAsyncRequests: 5,
-            // maxInitialRequests: 3,
-            chunks: 'all',
+            chunks: 'async',
             minSize: 0,
             maxAsyncRequests: Infinity,
             maxInitialRequests: Infinity,
@@ -50,21 +67,26 @@ const webpackConfig = merge(baseWebpackConfig, {
                     priority: -20,
                     reuseExistingChunk: true,
                 },
-                css: {
-                    name: function(el){
-                        console.log(el)
-                        return utils.assetsPath('css/'+ el.name +'.'+ el.hash +'.css')
-                    },
-                    test: /\.(css|sass|scss|less)(\?.*)?$/,
-                    chunks: 'all'
+                themeDark: {
+                    name: 'theme-dark',
+                    test: (m,c,entry = 'theme-dark') => recursiveIssuer(m) === entry,
+                    chunks: 'all',
+                    enforce: true
+                },
+                themeDefault: {
+                    name: 'theme-default',
+                    test: (m,c,entry = 'theme-default') => recursiveIssuer(m) === entry,
+                    chunks: 'all',
+                    enforce: true
                 },
                 echarts: {
                     name: 'echarts',
-                    enforce: true,
+                    chunks: 'all',
                     test: function(module){
                         var context = module.context;
                         return context && (context.indexOf('echarts') >= 0 || context.indexOf('zrender') >= 0)
-                    }
+                    },
+                    enforce: true
                 },
                 vendors: {
                     name: 'vendors',
@@ -80,26 +102,13 @@ const webpackConfig = merge(baseWebpackConfig, {
                     },
                     chunks: "all"
                 }
-                
-                // commons: {
-                //     test: /[\\/]node_modules[\\/]/,
-                //     name: "vendors",
-                //     chunks: "all"
-                // }
             }
         }
     },
     plugins: [
         // extract css into its own file
-        // new ExtractTextPlugin({
-        //     filename: utils.assetsPath('css/[name].[contenthash:7].css')
-        // }),
-        // Compress extracted CSS. We are using this plugin so that possible
-        // duplicated CSS from different components can be deduped.
-        new OptimizeCSSPlugin({
-            cssProcessorOptions: {
-                safe: true
-            }
+        new MiniCssExtractPlugin({
+            filename: utils.assetsPath('css/[name].[contenthash:7].css')
         }),
         // generate dist index.html with correct asset hash for caching.
         // you can customize output by editing /index.html
@@ -108,48 +117,13 @@ const webpackConfig = merge(baseWebpackConfig, {
             filename: config.build.index,
             template: './src/index.html',
             inject: true,
-            // minify: {
-            //   removeComments: true,
-            //   collapseWhitespace: true,
-            //   removeAttributeQuotes: true
-            //   // more options:
-            //   // https://github.com/kangax/html-minifier#options-quick-reference
-            // },
             minify: false,
             // necessary to consistently work with multiple chunks via CommonsChunkPlugin
             chunksSortMode: 'dependency',
             excludeChunks: ['theme-default', 'theme-dark']
         }),
         // keep module.id stable when vender modules does not change
         new webpack.HashedModuleIdsPlugin(),
-        // split vendor js into its own file
-        // new webpack.optimize.CommonsChunkPlugin({
-        //     name: 'vendor',
-        //     minChunks: function(module) {
-        //         // any required modules inside node_modules are extracted to vendor
-        //         return (
-        //             module.resource &&
-        //             /\.js$/.test(module.resource) &&
-        //             module.resource.indexOf(
-        //                 path.join(__dirname, '../node_modules')
-        //             ) === 0
-        //         )
-        //     }
-        // }),
-        // split echarts into its own file
-        // new webpack.optimize.CommonsChunkPlugin({
-        //     async: ['echarts'],
-        //     minChunks(module) {
-        //         var context = module.context;
-        //         return context && (context.indexOf('echarts') >= 0 || context.indexOf('zrender') >= 0);
-        //     }
-        // }),
-        // extract webpack runtime and module manifest to its own file in order to
-        // prevent vendor hash from being updated whenever app bundle is updated
-        // new webpack.optimize.CommonsChunkPlugin({
-        //     name: 'manifest',
-        //     chunks: ['vendor']
-        // }),
         // copy custom static assets
         new CopyWebpackPlugin([
           {

package-lock.json

@@ -67,6 +67,7 @@
     "semver": "^5.4.1",
     "shelljs": "^0.8.2",
     "style-loader": "^0.21.0",
+    "uglifyjs-webpack-plugin": "^1.2.5",
     "url-loader": "^1.0.1",
     "vue-loader": "^15.0.11",
     "vue-style-loader": "^4.1.0",

package.json

@@ -41,7 +41,7 @@ NProgress.configure({ showSpinner: false });
 Vue.use(VueRouter)
 
 const router = new VueRouter({
-    mode: 'history',
+    mode: 'hash',
     routes: staticRoute
 })