build(webpack): update webpack to webpack@4.39.3 (#56)

* build(webpack): update webpack to webpack@4.39.3 * update some package about webpack * optimize webpack config * fix webpack css minimize issue * optimize npm scripts * fix webpack plugin compiler hook * add source-map and remove react-hot-loader
webapp-suite · Sep 1, 2019 · fc81402 · fc81402
1 parent b38b2fb
commit fc81402
Show file tree

Hide file tree

Showing 14 changed files with 1,995 additions and 2,058 deletions.
diff --git a/.babelrc b/.babelrc
@@ -7,12 +7,5 @@
     "@babel/plugin-syntax-dynamic-import",
     ["@babel/plugin-proposal-class-properties", { "loose": false }],
     ["@babel/plugin-proposal-optional-chaining", { "loose": false }]
-  ],
-  "env": {
-    "development": {
-      "plugins": [
-        "react-hot-loader/babel"
-      ]
-    }
-  }
+  ]
 }
diff --git a/config/postcss.config.js b/config/postcss.config.js
diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -1,7 +1,10 @@
 const path = require('path')
 const rimraf = require('rimraf')
 const webpack = require('webpack')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const autoprefixer = require('autoprefixer')
 const sourcePath = path.resolve(__dirname, '../src')
 const outputPath = path.resolve(__dirname, '../dist')
 const entryName = `earth-ui.min`
@@ -16,34 +19,48 @@ const config = {
     filename: '[name].js',
     libraryTarget: 'umd'
   },
+  devtool: 'source-map',
   module: {
     rules: [
       {
         test: /\.(js|jsx)$/,
-        loaders: 'babel-loader',
+        use: ['babel-loader'],
         include: sourcePath
       },
       {
         test: /\.less$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: [
-            'css-loader?minimize=true',
-            'postcss-loader?config.path=config/postcss.config.js',
-            'less-loader?javascriptEnabled=true'
-          ]
-        }),
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              ident: 'postcss',
+              plugins: () => [autoprefixer({})]
+            }
+          },
+          {
+            loader: 'less-loader',
+            options: {
+              javascriptEnabled: true
+            }
+          }
+        ],
         include: sourcePath
       },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: [
-            'css-loader',
-            'postcss-loader?config.path=config/postcss.config.js'
-          ]
-        }),
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              ident: 'postcss',
+              plugins: () => [autoprefixer({})]
+            }
+          }
+        ],
         include: sourcePath
       },
       {
@@ -52,7 +69,7 @@ const config = {
       },
       {
         test: /\.snap$/,
-        loader: 'ignore-loader'
+        use: ['ignore-loader']
       }
     ]
   },
@@ -86,13 +103,22 @@ const config = {
     new webpack.DefinePlugin({
       prefixCls: JSON.stringify('earthui')
     }),
-    new ExtractTextPlugin('[name].css'),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        properties: false
-      }
-    })
-  ]
+    new MiniCssExtractPlugin('[name].css')
+  ],
+  optimization: {
+    minimizer: [
+      new UglifyJsPlugin({
+        parallel: true,
+        sourceMap: true
+      }),
+      new OptimizeCSSAssetsPlugin({
+        cssProcessorOptions: {
+          map: true,
+          preset: ['default', { discardComments: { removeAll: true } }]
+        }
+      })
+    ]
+  }
 }
 
 config.entry[entryName] = [`${sourcePath}/components/index.js`]

diff --git a/config/webpack.config.site.js b/config/webpack.config.site.js
@@ -1,14 +1,16 @@
+const fs = require('fs')
 const webpack = require('webpack')
 const path = require('path')
 const rimraf = require('rimraf')
 const LiveReloadPlugin = require('webpack-livereload-plugin')
-const fs = require('fs')
+const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
+const autoprefixer = require('autoprefixer')
 const Prism = require('../site/3rdParty/prism/prism.js')
 const sitePath = path.resolve(__dirname, '../site')
 const sourcePath = path.resolve(__dirname, '../src')
 const outputPath = path.resolve(__dirname, '../site/dist')
 
-const isProduction = process.env.SITE_ENV === 'production'
+const isProduction = process.env.NODE_ENV === 'production'
 
 rimraf.sync(outputPath)
 
@@ -26,17 +28,19 @@ const config = {
     rules: [
       {
         test: /\.(js|jsx)$/,
-        loader: 'babel-loader',
-        options: {
-          cacheDirectory: true
-          // babelrc: false,
-          // extends: 'config/.babelrc'
-        },
+        use: ['babel-loader'],
         exclude: /node_modules/
       },
       {
         test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
-        loader: 'file-loader?name=files/[hash].[ext]'
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: 'files/[hash].[ext]'
+            }
+          }
+        ]
       },
       {
         test: /\.less$/,
@@ -50,9 +54,8 @@ const config = {
           {
             loader: 'postcss-loader',
             options: {
-              config: {
-                path: 'config/postcss.config.js'
-              }
+              ident: 'postcss',
+              plugins: () => [autoprefixer({})]
             }
           },
           {
@@ -65,8 +68,21 @@ const config = {
       },
       {
         test: /\.css$/,
-        loader:
-          'style-loader!css-loader!postcss-loader?config.path=config/postcss.config.js'
+        use: [
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'css-loader'
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              ident: 'postcss',
+              plugins: () => [autoprefixer({})]
+            }
+          }
+        ]
       },
       {
         test: /\.md$/,
@@ -85,11 +101,11 @@ const config = {
       },
       {
         test: /\.dox$/,
-        loader: 'babel-loader!dox-loader'
+        use: ['babel-loader', 'dox-loader']
       },
       {
         test: /\.snap$/,
-        loader: 'ignore-loader'
+        use: ['ignore-loader']
       }
     ]
   },
@@ -115,54 +131,41 @@ const config = {
     'react-dom': 'ReactDOM',
     'prop-types': 'PropTypes'
   },
-  plugins: []
-}
-
-if (isProduction) {
-  config.plugins.push(
+  plugins: [
     new webpack.DefinePlugin({
-      'process.env': {
-        SITE_ENV: JSON.stringify('production')
-      }
-    })
-  )
-  config.plugins.push(
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      },
-      output: {
-        comments: false
-      }
+      prefixCls: JSON.stringify('earthui')
     })
-  )
-} else {
+  ],
+  optimization: {}
+}
+
+if (!isProduction) {
   config.plugins.push(
     new LiveReloadPlugin({
       appendScriptTag: true
-    })
+    }),
+    new FriendlyErrorsWebpackPlugin()
   )
 }
 
-config.plugins.push(
-  new webpack.DefinePlugin({
-    prefixCls: JSON.stringify('earthui')
-  })
-)
-
 // Generate index.html in 'site' dir
-config.plugins.push(function () {
-  this.plugin('done', function (statsData) {
-    const stats = statsData.toJson()
-    let html = fs.readFileSync(`${sitePath}/index.html`, 'utf8')
-    const distPath =
-      config.output.publicPath +
-      'site.' +
-      (isProduction ? stats.hash + '.' : '') +
-      'js'
-    html = html.replace(/(<script src=").*?dist.*?(")/, '$1' + distPath + '$2')
-    fs.writeFileSync(path.join(`${sitePath}/index.html`), html)
-  })
+config.plugins.push({
+  apply: compiler => {
+    compiler.hooks.done.tap('ChangeHtmlScript', statsData => {
+      const stats = statsData.toJson()
+      let html = fs.readFileSync(`${sitePath}/index.html`, 'utf8')
+      const distPath =
+        config.output.publicPath +
+        'site.' +
+        (isProduction ? stats.hash + '.' : '') +
+        'js'
+      html = html.replace(
+        /(<script src=").*?dist.*?(")/,
+        '$1' + distPath + '$2'
+      )
+      fs.writeFileSync(path.join(`${sitePath}/index.html`), html)
+    })
+  }
 })
 
 module.exports = config