You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dubbo.apache.org by mi...@apache.org on 2019/04/10 02:28:19 UTC

[incubator-dubbo-admin] branch 0.2.0-release updated: upgrade to webpack4

This is an automated email from the ASF dual-hosted git repository.

min pushed a commit to branch 0.2.0-release
in repository https://gitbox.apache.org/repos/asf/incubator-dubbo-admin.git


The following commit(s) were added to refs/heads/0.2.0-release by this push:
     new bded13c  upgrade to webpack4
bded13c is described below

commit bded13c9bd04f4b67b2a154a1f68f92aec6a4414
Author: nzomkxia <z8...@gmail.com>
AuthorDate: Wed Apr 10 10:28:00 2019 +0800

    upgrade to webpack4
---
 dubbo-admin-server/pom.xml                |  2 +
 dubbo-admin-ui/build/utils.js             |  7 +--
 dubbo-admin-ui/build/vue-loader.conf.js   |  2 +-
 dubbo-admin-ui/build/webpack.dev.conf.js  |  3 +-
 dubbo-admin-ui/build/webpack.prod.conf.js | 86 +++++++++++++------------------
 dubbo-admin-ui/package.json               | 13 ++---
 6 files changed, 49 insertions(+), 64 deletions(-)

diff --git a/dubbo-admin-server/pom.xml b/dubbo-admin-server/pom.xml
index d29ff40..64007a8 100644
--- a/dubbo-admin-server/pom.xml
+++ b/dubbo-admin-server/pom.xml
@@ -203,6 +203,8 @@
                                     <includes>
                                         <include>static/</include>
                                         <include>index.html</include>
+                                        <include>app.css</include>
+                                        <include>app.css.map</include>
                                     </includes>
                                 </resource>
                             </resources>
diff --git a/dubbo-admin-ui/build/utils.js b/dubbo-admin-ui/build/utils.js
index 2b70d5d..3fe4385 100644
--- a/dubbo-admin-ui/build/utils.js
+++ b/dubbo-admin-ui/build/utils.js
@@ -18,7 +18,7 @@
 'use strict'
 const path = require('path')
 const config = require('../config/index')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const packageConfig = require('../package.json')
 
 exports.assetsPath = function (_path) {
@@ -62,10 +62,7 @@ exports.cssLoaders = function (options) {
     // Extract CSS when that option is specified
     // (which is the case during production build)
     if (options.extract) {
-      return ExtractTextPlugin.extract({
-        use: loaders,
-        fallback: 'vue-style-loader'
-      })
+      return [MiniCssExtractPlugin.loader].concat(loaders)
     } else {
       return ['vue-style-loader'].concat(loaders)
     }
diff --git a/dubbo-admin-ui/build/vue-loader.conf.js b/dubbo-admin-ui/build/vue-loader.conf.js
index ec1ee73..f2cf2d9 100644
--- a/dubbo-admin-ui/build/vue-loader.conf.js
+++ b/dubbo-admin-ui/build/vue-loader.conf.js
@@ -24,7 +24,7 @@ const sourceMapEnabled = isProduction
   : config.dev.cssSourceMap
 
 module.exports = {
-  loaders: utils.cssLoaders({
+  rules: utils.cssLoaders({
     sourceMap: sourceMapEnabled,
     extract: isProduction
   }),
diff --git a/dubbo-admin-ui/build/webpack.dev.conf.js b/dubbo-admin-ui/build/webpack.dev.conf.js
index 5ade97a..00e7147 100755
--- a/dubbo-admin-ui/build/webpack.dev.conf.js
+++ b/dubbo-admin-ui/build/webpack.dev.conf.js
@@ -66,9 +66,8 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       'process.env': require('../config/dev.env')
     }),
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
-    new webpack.NoEmitOnErrorsPlugin(),
     // https://github.com/ampedandwired/html-webpack-plugin
+    new webpack.LoaderOptionsPlugin({ options: {} }),
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: 'index.html',
diff --git a/dubbo-admin-ui/build/webpack.prod.conf.js b/dubbo-admin-ui/build/webpack.prod.conf.js
index 3417b9a..bd57707 100644
--- a/dubbo-admin-ui/build/webpack.prod.conf.js
+++ b/dubbo-admin-ui/build/webpack.prod.conf.js
@@ -24,7 +24,7 @@ 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 MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
@@ -32,11 +32,15 @@ const env = require('../config/prod.env')
 
 const webpackConfig = merge(baseWebpackConfig, {
   module: {
-    rules: utils.styleLoaders({
-      sourceMap: config.build.productionSourceMap,
-      extract: true,
-      usePostCSS: true
-    })
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          "css-loader"
+        ]
+      }
+    ]
   },
   devtool: config.build.productionSourceMap ? config.build.devtool : false,
   output: {
@@ -49,23 +53,10 @@ const webpackConfig = merge(baseWebpackConfig, {
     new webpack.DefinePlugin({
       'process.env': env
     }),
-    new UglifyJsPlugin({
-      uglifyOptions: {
-        compress: {
-          warnings: false
-        }
-      },
-      sourceMap: config.build.productionSourceMap,
-      parallel: true
-    }),
     // extract css into its own file
-    new ExtractTextPlugin({
-      filename: utils.assetsPath('css/[name].[contenthash].css'),
-      // Setting the following option to `false` will not extract CSS from codesplit chunks.
-      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
-      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
-      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
-      allChunks: true,
+    new webpack.LoaderOptionsPlugin({ options: {} }),
+    new MiniCssExtractPlugin({
+      filename: "[name].css",
     }),
     // Compress extracted CSS. We are using this plugin so that possible
     // duplicated CSS from different components can be deduped.
@@ -93,36 +84,31 @@ const webpackConfig = merge(baseWebpackConfig, {
     }),
     // keep module.id stable when vendor modules does not change
     new webpack.HashedModuleIdsPlugin(),
-    // enable scope hoisting
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    // split vendor js into its own file
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks (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.SplitChunksPlugin({
+      cacheGroups: {
+        default: {
+          minChunks: 2,
+          priority: -20,
+          reuseExistingChunk: true,
+        },
+        vendor: {
+          chunks: 'initial',
+          minChunks: 2,
+          maxInitialRequests: 5, // The default limit is too small to showcase the effect
+          minSize: 0, // This is example is too small to create commons chunks
+          name: 'vendor'
+        },
+        commons: {
+          name: "commons",
+          chunks: "initial",
+          minChunks: Infinity
+        }
       }
     }),
-    // 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',
-      minChunks: Infinity
-    }),
-    // This instance extracts shared chunks from code splitted chunks and bundles them
-    // in a separate chunk, similar to the vendor chunk
-    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'app',
-      async: 'vendor-async',
-      children: true,
-      minChunks: 3
+
+    new webpack.optimize.RuntimeChunkPlugin({
+      name: "manifest"
     }),
 
     // copy custom static assets
diff --git a/dubbo-admin-ui/package.json b/dubbo-admin-ui/package.json
index 19256d6..d04c86a 100644
--- a/dubbo-admin-ui/package.json
+++ b/dubbo-admin-ui/package.json
@@ -47,11 +47,11 @@
     "eslint-plugin-node": "^5.2.0",
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-standard": "^3.0.1",
-    "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.4",
-    "friendly-errors-webpack-plugin": "^1.6.1",
-    "html-webpack-plugin": "^2.30.1",
-    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "friendly-errors-webpack-plugin": "^1.7.0",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.5.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "ora": "^1.2.0",
     "portfinder": "^1.0.13",
     "postcss-import": "^11.0.0",
@@ -68,9 +68,10 @@
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",
-    "webpack": "^3.6.0",
+    "webpack": "^4.29.6",
     "webpack-bundle-analyzer": "^2.9.0",
-    "webpack-dev-server": "^2.9.1",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.3.0",
     "webpack-merge": "^4.1.0"
   },
   "engines": {