webpack4 prod文件修改(未完成)

Author: harsima

build/webpack.prod.conf.js

@@ -13,12 +13,11 @@ const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 const webpackConfig = merge(baseWebpackConfig, {
     entry: {
         'theme-dark': './src/assets/css/theme-dark.scss',
-        'theme-green': './src/assets/css/theme-green.scss'
+        'theme-default': './src/assets/css/theme-default.scss'
     },
     module: {
         rules: utils.styleLoaders({
-            sourceMap: config.build.productionSourceMap,
-            extract: true
+            sourceMap: config.build.productionSourceMap
         })
     },
     devtool: config.build.productionSourceMap ? '#source-map' : false,
@@ -28,21 +27,73 @@ const webpackConfig = merge(baseWebpackConfig, {
         chunkFilename: utils.assetsPath('js/[name].[chunkhash:7].js')
     },
     mode: "production",
+    // 文件压缩及chunk分离
+    // https://github.com/webpack/webpack/issues/6409
+    // https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
+    optimization: {
+        minimize: true,
+        runtimeChunk: true,
+        splitChunks: {
+            // chunks: "async",
+            // maxAsyncRequests: 5,
+            // maxInitialRequests: 3,
+            chunks: 'all',
+            minSize: 0,
+            maxAsyncRequests: Infinity,
+            maxInitialRequests: Infinity,
+            name: true,
+            cacheGroups: {
+                default: {
+                    chunks: 'async',
+                    maxAsyncRequests: 5,
+                    maxInitialRequests: 3,
+                    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'
+                },
+                echarts: {
+                    name: 'echarts',
+                    enforce: true,
+                    test: function(module){
+                        var context = module.context;
+                        return context && (context.indexOf('echarts') >= 0 || context.indexOf('zrender') >= 0)
+                    }
+                },
+                vendors: {
+                    name: 'vendors',
+                    enforce: true,
+                    test: function(module){
+                        return (
+                            module.resource &&
+                            /\.js$/.test(module.resource) &&
+                            module.resource.indexOf(
+                                path.join(__dirname, '../node_modules')
+                            ) === 0
+                        )
+                    },
+                    chunks: "all"
+                }
+                
+                // commons: {
+                //     test: /[\\/]node_modules[\\/]/,
+                //     name: "vendors",
+                //     chunks: "all"
+                // }
+            }
+        }
+    },
     plugins: [
-        // http://vuejs.github.io/vue-loader/en/workflow/production.html
-        // new webpack.DefinePlugin({
-        //     'process.env': env
-        // }),
-        new webpack.optimize.UglifyJsPlugin({
-            compress: {
-                warnings: false
-            },
-            sourceMap: false
-        }),
         // extract css into its own file
-        new ExtractTextPlugin({
-            filename: utils.assetsPath('css/[name].[contenthash:7].css')
-        }),
+        // 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({
@@ -67,38 +118,38 @@ const webpackConfig = merge(baseWebpackConfig, {
             minify: false,
             // necessary to consistently work with multiple chunks via CommonsChunkPlugin
             chunksSortMode: 'dependency',
-            excludeChunks: ['theme-default', 'theme-green']
+            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
-                )
-            }
-        }),
+        // 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);
-            }
-        }),
+        // 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']
-        }),
+        // new webpack.optimize.CommonsChunkPlugin({
+        //     name: 'manifest',
+        //     chunks: ['vendor']
+        // }),
         // copy custom static assets
         new CopyWebpackPlugin([
           {

package-lock.json

@@ -48,13 +48,13 @@
     "eslint-plugin-promise": "^3.4.0",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.16.2",
-    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^3.2.0",
     "http-proxy-middleware": "^0.18.0",
     "less": "^3.0.4",
     "less-loader": "^4.0.5",
+    "mini-css-extract-plugin": "^0.4.0",
     "node-sass": "^4.9.0",
     "opn": "^5.1.0",
     "optimize-css-assets-webpack-plugin": "^4.0.1",

package.json

@@ -1,5 +1,5 @@
 // 生产环境中注释掉以下语句
-import 'sysStatic/css/theme-default.scss'
+// import 'sysStatic/css/theme-default.scss'
 import '../mock/index.js'
 
 import 'babel-polyfill'