@autobest-ui/scripts 0.1.0 → 1.0.0

package/common/formatWebpackMessages.js

@@ -12,9 +12,9 @@ function formatMessage(message) {
   } else if ('message' in message) {
     lines = message.message.split('\n');
   } else if (Array.isArray(message)) {
-    message.forEach(message => {
-      if ('message' in message) {
-        lines = message.message.split('\n');
+    message.forEach(child => {
+      if ('message' in child) {
+        lines = child.message.split('\n');
       }
     });
   }
@@ -31,10 +31,7 @@ function formatMessage(message) {
   });
 
   message = lines.join('\n');
-  message = message.replace(
-    /SyntaxError\s+\((\d+):(\d+)\)\s*(.+?)\n/g,
-    `${friendlySyntaxErrorLabel} $3 ($1:$2)\n`
-  );
+  message = message.replace(/SyntaxError\s+\((\d+):(\d+)\)\s*(.+?)\n/g, `${friendlySyntaxErrorLabel} $3 ($1:$2)\n`);
 
   message = message.replace(
     /^.*export '(.+?)' was not found in '(.+?)'.*$/gm,
@@ -58,9 +55,7 @@ function formatMessage(message) {
   if (lines[1] && lines[1].indexOf('Module not found: ') === 0) {
     lines = [
       lines[0],
-      lines[1]
-        .replace('Error: ', '')
-        .replace('Module not found: Cannot find file:', 'Cannot find file:')
+      lines[1].replace('Error: ', '').replace('Module not found: Cannot find file:', 'Cannot find file:')
     ];
   }
 

package/common/getCSSModuleLocalIdent.js

@@ -1,14 +1,8 @@
 const loaderUtils = require('loader-utils');
 
 module.exports = function getLocalIdent(context, localIdentName, localName, options) {
-  const fileNameOrFolder = context.resourcePath.match(/index\.module\.(css|scss|sass)$/)
-    ? '[folder]'
-    : '[name]';
+  const fileNameOrFolder = context.resourcePath.match(/index\.module\.(css|scss|sass)$/) ? '[folder]' : '[name]';
   const hash = loaderUtils.getHashDigest(context.resourcePath + localName, 'md5', 'base64', 5);
-  const className = loaderUtils.interpolateName(
-    context,
-    `${fileNameOrFolder}_${localName}_${hash}`,
-    options
-  );
+  const className = loaderUtils.interpolateName(context, `${fileNameOrFolder}_${localName}_${hash}`, options);
   return className.replace('.module_', '_');
 };

package/common/start.js

@@ -1,4 +1,4 @@
-const webpackDevServer = require('webpack-dev-server');
+const WebpackDevServer = require('webpack-dev-server');
 const webpack = require('webpack');
 const open = require('open');
 const appConfig = require('./appConfig');
@@ -15,36 +15,38 @@ function openStartRun(webpackFactory) {
   const extendEnv = getEnvironmentInfo();
 
   const options = {
-    contentBase: getProjectPath(appConfig.startOutput.path),
+    allowedHosts: 'all',
     hot: true,
     host: HOST,
-    quiet: true,
-    publicPath: appConfig.startOutput.publicPath || '/',
+    port: PORT,
     compress: true,
-    overlay: false,
     historyApiFallback: {
       // https://github.com/facebook/create-react-app/issues/387.
       disableDotRule: true
     },
-    watchOptions: {
-      aggregateTimeout: 300,
-      poll: 1000,
-      ignored: /node_modules/
+    client: {
+      overlay: false,
+      progress: false
     },
-    disableHostCheck: true
+    static: {
+      directory: getProjectPath(appConfig.startOutput.path),
+      publicPath: appConfig.startOutput.publicPath || '/',
+      watch: {
+        aggregateTimeout: 300,
+        poll: 1000,
+        ignored: /node_modules/
+      }
+    }
   };
 
   const startOpenPath = appConfig.startOpenPath ? appConfig.startOpenPath : '';
 
   try {
     const config = webpackFactory({ ...appConfig, port: PORT, startOpenPath }, extendEnv);
-
-    webpackDevServer.addDevServerEntrypoints(config, options);
     const compiler = webpack(config);
-    // eslint-disable-next-line new-cap
-    const server = new webpackDevServer(compiler, options);
+    const server = new WebpackDevServer(options, compiler);
 
-    server.listen(PORT, HOST, err => {
+    server.startCallback(err => {
       if (err) {
         // eslint-disable-next-line no-console
         console.log(err);
@@ -52,7 +54,6 @@ function openStartRun(webpackFactory) {
       }
       open(`http://localhost:${PORT}${startOpenPath}`);
     });
-
     ['SIGINT', 'SIGTERM'].forEach(sig => {
       process.on(sig, () => {
         server.close();

package/common/utils.js

@@ -34,25 +34,25 @@ function getParseArgsToJson() {
   return result;
 }
 
-function isExistsSyncFile(path) {
-  return fs.existsSync(path);
+function isExistsSyncFile(currentPath) {
+  return fs.existsSync(currentPath);
 }
 
 const parseArgsToJson = getParseArgsToJson();
 
-function deleteFolders(path) {
+function deleteFolders(currentPath) {
   let files = [];
-  if (isExistsSyncFile(path)) {
-    files = fs.readdirSync(path);
+  if (isExistsSyncFile(currentPath)) {
+    files = fs.readdirSync(currentPath);
     files.forEach(file => {
-      const curPath = `${path}/${file}`;
+      const curPath = `${currentPath}/${file}`;
       if (fs.statSync(curPath).isDirectory()) {
         deleteFolders(curPath);
       } else {
         fs.unlinkSync(curPath);
       }
     });
-    fs.rmdirSync(path);
+    fs.rmdirSync(currentPath);
   }
 }
 

package/common/webpack.common.js

@@ -1,64 +1,76 @@
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const HappyPack = require('happypack');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const getCSSModuleLocalIdent = require('./getCSSModuleLocalIdent');
 const { getProjectPath, isExistsSyncFile } = require('./utils');
-
 const appWebpackConfigPath = getProjectPath('/config/app.webpack.js');
 
-const happyThreadPool = HappyPack.ThreadPool({ size: 5 });
 const sassRegex = /\.(scss|sass)$/;
 const sassModuleRegex = /\.module\.(scss|sass)$/;
+const imageResolvingRegex = /\.resolving\.(png|jpg|jepg|gif)$/;
 
 function getStyleLoaders({ isProd, isServer, isHotServer, isSass, moduleOption = {} }) {
   const result = [
     {
-      loader: 'css-loader',
+      loader: require.resolve('css-loader'),
       options: {
-        importLoaders: 1,
-        ...moduleOption
+        ...moduleOption,
+        url: {
+          // background image只解析以".resolving."结尾的静态资源， 例如：'img.resolving.png'
+          filter: url => imageResolvingRegex.test(url)
+        }
       }
     },
     {
-      loader: 'postcss-loader',
+      loader: require.resolve('postcss-loader'),
       options: {
-        ident: 'postcss',
-        plugins: () => [
-          require('postcss-flexbugs-fixes'),
-          require('postcss-preset-env')({
-            autoprefixer: {
-              flexbox: 'no-2009',
-              remove: false,
-              grid: true
-            },
-            stage: 3
-          })
-        ],
+        postcssOptions: {
+          ident: 'postcss',
+          config: false,
+          plugins: [
+            'postcss-flexbugs-fixes',
+            [
+              'postcss-preset-env',
+              {
+                autoprefixer: {
+                  flexbox: 'no-2009'
+                },
+                stage: 3
+              }
+            ],
+            'postcss-normalize'
+          ]
+        },
         sourceMap: false
       }
     }
   ];
 
   if (isSass) {
-    result.push({
-      loader: 'sass-loader'
-    });
+    result.push(
+      {
+        loader: require.resolve('resolve-url-loader')
+      },
+      {
+        loader: require.resolve('sass-loader'),
+        options: {
+          // 增加环境变量，供sass使用
+          additionalData: `$env: ${process.env.NODE_ENV};`
+        }
+      }
+    );
   }
 
   if ((isProd || isHotServer) && !isServer) {
     result.unshift({
-      loader: MiniCssExtractPlugin.loader,
-      options: {
-        hmr: false
-      }
+      loader: MiniCssExtractPlugin.loader
     });
   }
 
   if (!isProd && !isHotServer) {
     result.unshift({
-      loader: 'style-loader'
+      loader: require.resolve('style-loader')
     });
   }
 
@@ -67,6 +79,7 @@ function getStyleLoaders({ isProd, isServer, isHotServer, isSass, moduleOption =
 
 module.exports = (appConfig, extendEnv, { isProd, isServer, isHotServer, isSetCommonAlias }) => {
   const result = {
+    stats: 'errors-only',
     // 原始源代码（仅限行）定位到原始代码问题，比source-map 快，但是没有列映射(column mapping)的 source-map
     devtool: isProd ? 'source-map' : 'cheap-module-source-map',
     // 会将 process.env.NODE_ENV 的值设为 development, 告知 webpack 使用相应模式的内置优化
@@ -82,10 +95,59 @@ module.exports = (appConfig, extendEnv, { isProd, isServer, isHotServer, isSetCo
       rules: [
         {
           oneOf: [
+            {
+              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+              type: 'asset'
+            },
             {
               test: /\.(js|ts|tsx)$/,
               exclude: /node_modules/,
-              use: 'happypack/loader?id=jsbabel'
+              use: {
+                loader: require.resolve('babel-loader'),
+                options: {
+                  cacheDirectory: true,
+                  presets: [
+                    [
+                      require('@babel/preset-env').default,
+                      {
+                        useBuiltIns: 'entry',
+                        corejs: 3,
+                        exclude: ['transform-typeof-symbol']
+                      }
+                    ],
+                    require('@babel/preset-react').default,
+                    require('@babel/preset-typescript').default
+                  ],
+                  plugins: [
+                    require('@loadable/babel-plugin').default,
+                    require('@babel/plugin-transform-runtime').default,
+                    [require('@babel/plugin-proposal-decorators').default, { legacy: true }],
+
+                    [
+                      require('@babel/plugin-proposal-class-properties').default,
+                      {
+                        loose: true
+                      }
+                    ],
+                    [
+                      require('@babel/plugin-proposal-private-methods').default,
+                      {
+                        loose: true
+                      }
+                    ],
+                    [
+                      require('@babel/plugin-proposal-private-property-in-object').default,
+                      {
+                        loose: true
+                      }
+                    ],
+                    // 支持 "??"
+                    require('@babel/plugin-proposal-nullish-coalescing-operator').default,
+                    // 支持"?."
+                    require('@babel/plugin-proposal-optional-chaining').default
+                  ]
+                }
+              }
             },
             {
               test: sassRegex,
@@ -104,10 +166,13 @@ module.exports = (appConfig, extendEnv, { isProd, isServer, isHotServer, isSetCo
                 isServer,
                 isHotServer,
                 isSass: true,
-                moduleOption: {
-                  getLocalIdent: getCSSModuleLocalIdent,
-                  importLoaders: 2,
-                  modules: true
+                modulesOptions: {
+                  importLoaders: 3,
+                  sourceMap: false,
+                  modules: {
+                    mode: 'local',
+                    getLocalIdent: getCSSModuleLocalIdent
+                  }
                 }
               })
             },
@@ -118,14 +183,6 @@ module.exports = (appConfig, extendEnv, { isProd, isServer, isHotServer, isSetCo
                 isServer,
                 isHotServer
               })
-            },
-            {
-              test: [/\.jpe?g$/, /\.png$/, /\.bmp$/, /\.gif$/],
-              loader: 'url-loader',
-              options: {
-                limit: 2048,
-                name: `static/[name].[contenthash:8].[ext]?v=${extendEnv.version}`
-              }
             }
           ]
         }
@@ -143,52 +200,17 @@ module.exports = (appConfig, extendEnv, { isProd, isServer, isHotServer, isSetCo
         failOnError: false,
         extensions: ['ts', 'tsx', 'js']
       }),
-      new HappyPack({
-        id: 'jsbabel',
-        verbose: false,
-        threadPool: happyThreadPool,
-        loaders: [
-          {
-            loader: 'babel-loader',
-            options: {
-              cacheDirectory: true,
-              presets: [
-                'react-app',
-                '@babel/preset-env',
-                '@babel/preset-react',
-                '@babel/typescript'
-              ],
-              plugins: [
-                '@loadable/babel-plugin',
-                '@babel/plugin-transform-object-assign',
-                '@babel/plugin-transform-shorthand-properties',
-                '@babel/plugin-transform-runtime',
-                [
-                  '@babel/plugin-proposal-decorators',
-                  {
-                    legacy: true
-                  }
-                ],
-                [
-                  '@babel/plugin-proposal-class-properties',
-                  {
-                    loose: false
-                  }
-                ]
-              ]
-            }
-          }
-        ]
-      }),
       new ProgressBarPlugin({
         // eslint-disable-next-line no-useless-concat
         format: 'build [:bar] ' + ':percent' + ' (:elapsed seconds)',
-        clear: false
+        clear: true
       })
     ]
   };
   if (isProd && !isServer) {
     result.optimization = {
+      chunkIds: 'named',
+      moduleIds: 'named',
       minimize: true
     };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobest-ui/scripts",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": false,
   "description": "utils for project tools",
   "bin": {
@@ -44,54 +44,54 @@
   },
   "homepage": "https://autobest.visualstudio.com/AutoBestChina/_git/AutobestFrontendCommon#readme",
   "dependencies": {
-    "@babel/core": "7.13.0",
-    "@babel/plugin-proposal-class-properties": "7.12.13",
-    "@babel/plugin-proposal-decorators": "7.14.2",
-    "@babel/plugin-transform-object-assign": "7.2.0",
-    "@babel/plugin-transform-runtime": "7.14.3",
-    "@babel/plugin-transform-shorthand-properties": "7.2.0",
-    "@babel/preset-env": "7.13.15",
-    "@babel/preset-react": "7.13.13",
-    "@babel/preset-typescript": "^7.10.1",
-    "@loadable/babel-plugin": "5.12.0",
-    "@loadable/webpack-plugin": "5.12.0",
-    "babel-eslint": "10.0.1",
-    "babel-loader": "8.0.5",
-    "babel-plugin-named-asset-import": "^0.3.2",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-react-app": "^9.0.0",
-    "chalk": "2.4.2",
+    "@babel/core": "7.17.8",
+    "@babel/plugin-proposal-class-properties": "7.16.7",
+    "@babel/plugin-transform-runtime": "7.17.0",
+    "@babel/preset-env": "7.16.11",
+    "@babel/preset-react": "7.16.7",
+    "@babel/preset-typescript": "7.16.7",
+    "@loadable/babel-plugin": "5.13.2",
+    "@loadable/webpack-plugin": "5.15.2",
+    "@soda/friendly-errors-webpack-plugin": "1.8.1",
+    "babel-loader": "8.2.4",
+    "babel-preset-react-app": "10.0.1",
+    "browserslist": "4.20.2",
+    "chalk": "4.1.2",
     "cross-spawn": "7.0.3",
-    "css-loader": "2.1.1",
-    "cssnano": "^4.1.10",
-    "eslint-webpack-plugin": "2.5.3",
-    "file-loader": "3.0.1",
-    "friendly-errors-webpack-plugin": "^1.7.0",
-    "happypack": "5.0.1",
-    "html-webpack-plugin": "4.3.0",
-    "ignore-loader": "^0.1.2",
+    "css-loader": "6.7.1",
+    "css-minimizer-webpack-plugin": "3.4.1",
+    "eslint": "8.12.0",
+    "eslint-config-react-app": "7.0.0",
+    "eslint-webpack-plugin": "3.1.1",
+    "html-webpack-plugin": "5.5.0",
+    "ignore-loader": "0.1.2",
     "ip": "1.1.5",
-    "loader-utils": "2.0.0",
-    "mini-css-extract-plugin": "^0.8.0",
-    "node-sass": "4.12.0",
-    "nodemon": "^1.19.1",
-    "open": "7.0.4",
-    "optimize-css-assets-webpack-plugin": "5.0.3",
-    "postcss-flexbugs-fixes": "4.1.0",
-    "postcss-loader": "3.0.0",
-    "postcss-preset-env": "6.6.0",
-    "postcss-safe-parser": "4.0.1",
-    "progress-bar-webpack-plugin": "^2.1.0",
-    "sass-loader": "7.1.0",
-    "script-ext-html-webpack-plugin": "2.1.4",
-    "style-loader": "0.23.1",
-    "terser-webpack-plugin": "^4.0.0",
-    "ts-pnp": "1.1.2",
-    "url-loader": "1.1.2",
-    "webpack": "4.43.0",
-    "webpack-dev-server": "3.7.1",
-    "webpack-merge": "^4.2.1",
-    "webpack-node-externals": "1.7.2"
+    "loader-utils": "3.2.0",
+    "mini-css-extract-plugin": "2.6.0",
+    "nodemon": "2.0.15",
+    "open": "8.4.0",
+    "postcss": "8.4.12",
+    "postcss-flexbugs-fixes": "5.0.2",
+    "postcss-loader": "6.2.1",
+    "postcss-preset-env": "7.4.3",
+    "sass": "1.49.9",
+    "sass-loader": "12.6.0",
+    "style-loader": "3.3.1",
+    "terser-webpack-plugin": "5.3.1",
+    "webpack": "5.70.0",
+    "webpack-dev-server": "4.7.4",
+    "webpack-merge": "5.8.0",
+    "webpack-node-externals": "3.0.0"
   },
-  "gitHead": "5350d0e451afedca23971bd5469c6f7320145fae"
+  "gitHead": "5350d0e451afedca23971bd5469c6f7320145fae",
+  "devDependencies": {
+    "@babel/plugin-proposal-decorators": "^7.17.8",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
+    "@babel/plugin-proposal-private-methods": "^7.16.11",
+    "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
+    "postcss-normalize": "^10.0.1",
+    "progress-bar-webpack-plugin": "^2.1.0",
+    "resolve-url-loader": "^5.0.0"
+  }
 }

package/spaConfig/build.js

@@ -34,15 +34,9 @@ build()
         // eslint-disable-next-line no-console
         console.log(warnings.join('\n\n'));
         // eslint-disable-next-line no-console
-        console.log(
-          `\nSearch for the ${chalk.underline(
-            chalk.yellow('keywords')
-          )} to learn more about each warning.`
-        );
+        console.log(`\nSearch for the ${chalk.underline(chalk.yellow('keywords'))} to learn more about each warning.`);
         // eslint-disable-next-line no-console
-        console.log(
-          `To ignore, add ${chalk.cyan('// eslint-disable-next-line')} to the line before.\n`
-        );
+        console.log(`To ignore, add ${chalk.cyan('// eslint-disable-next-line')} to the line before.\n`);
       } else {
         // eslint-disable-next-line no-console
         console.log(chalk.green('Compiled successfully.\n'));

package/spaConfig/start.js

@@ -1,4 +1,4 @@
-const webpackFactory = require('./webpack.dev');
 const openStartRun = require('../common/start');
+const webpackFactory = require('./webpack.dev');
 
 openStartRun(webpackFactory);

package/spaConfig/webpack.base.js

@@ -1,4 +1,4 @@
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { getProjectPath } = require('../common/utils');
@@ -9,7 +9,19 @@ module.exports = (isProd, appConfig, extendEnv) => {
     plugins: [
       new HtmlWebpackPlugin({
         inject: true,
-        template: getProjectPath(appConfig.htmlPluginTemplate)
+        template: getProjectPath(appConfig.htmlPluginTemplate),
+        templateParameters: isProd
+          ? (compilation, assets, tags, options) => {
+              tags.headTags.forEach(tag => {
+                if (tag.tagName === 'script') {
+                  tag.attributes.async = true;
+                }
+              });
+              return {
+                htmlWebpackPlugin: { options }
+              };
+            }
+          : null
       })
     ]
   };
@@ -17,9 +29,7 @@ module.exports = (isProd, appConfig, extendEnv) => {
   if (isProd) {
     result.plugins.push(
       new MiniCssExtractPlugin({
-        filename: `css/[name].css?v=${extendEnv.version}`,
-        allChunks: true,
-        ignoreOrder: true
+        filename: `css/[name].css?v=${extendEnv.version}`
       })
     );
   }

package/spaConfig/webpack.dev.js

@@ -1,25 +1,21 @@
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const ip = require('ip');
-const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
-const baseConfig = require('./webpack.base');
+const FriendlyErrorsPlugin = require('@soda/friendly-errors-webpack-plugin');
 const { getProjectPath } = require('../common/utils');
+const baseConfig = require('./webpack.base');
 
 const HOST = process.env.HOST || ip.address() || 'localhost';
 
-module.exports = function(appConfig, extendEnv) {
+module.exports = function (appConfig, extendEnv) {
   return merge(baseConfig(false, appConfig, extendEnv), {
     entry: getProjectPath(appConfig.startEntry),
     output: {
       publicPath: appConfig.startOutput.publicPath || '/',
       path: appConfig.startOutput.path,
       pathinfo: true,
-      futureEmitAssets: true,
-      filename: 'bundle.js',
+      filename: '[name].js',
       chunkFilename: '[name].chunk.js'
     },
-    node: {
-      fs: 'empty'
-    },
     plugins: [
       // 相关配置文档：https://github.com/geowarin/friendly-errors-webpack-plugin
       new FriendlyErrorsPlugin({

package/spaConfig/webpack.prod.js

@@ -1,13 +1,10 @@
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const TerserPlugin = require('terser-webpack-plugin');
-const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
-// eslint-disable-next-line import/no-extraneous-dependencies
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const safePostCssParser = require('postcss-safe-parser');
-const baseConfig = require('./webpack.base');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { getProjectPath, deleteFolders } = require('../common/utils');
+const baseConfig = require('./webpack.base');
 
-module.exports = function(appConfig, extendEnv) {
+module.exports = function (appConfig, extendEnv) {
   const outputPath = getProjectPath(appConfig.buildOutput.path);
   deleteFolders(outputPath);
 
@@ -23,48 +20,47 @@ module.exports = function(appConfig, extendEnv) {
       // 非入口文件生产的js
       chunkFilename: `js/[name].chunk.js?v=${extendEnv.version}`
     },
-    node: {
-      fs: 'empty'
-    },
-    plugins: [
-      new ScriptExtHtmlWebpackPlugin({
-        defaultAttribute: 'async',
-        preload: /\.js\?v=/
-      })
-    ],
     optimization: {
       concatenateModules: true,
       minimizer: [
         // 压缩js
         new TerserPlugin({
-          cache: true,
-          parallel: true,
-          sourceMap: true
-        }),
-
-        // 压缩css
-        new OptimizeCSSAssetsPlugin({
-          cssProcessorOptions: {
-            parser: safePostCssParser,
-            map: {
-              inline: false,
-              annotation: false
+          terserOptions: {
+            parse: {
+              ecma: 8
+            },
+            compress: {
+              ecma: 5,
+              warnings: false,
+              comparisons: false,
+              inline: 2
+            },
+            mangle: {
+              safari10: true
+            },
+            output: {
+              ecma: 5,
+              comments: false,
+              ascii_only: true
             }
           }
-        })
+        }),
+        // 压缩css
+        new CssMinimizerPlugin()
       ],
       splitChunks: {
         chunks: 'initial',
         minSize: 0,
+        // 按需加载时并行请求的最大数量
         maxAsyncRequests: 5,
+        // 入口位置最大的请求数量
         maxInitialRequests: 3,
         automaticNameDelimiter: '~',
-        name: true,
         cacheGroups: {
-          vendor: {
+          commons: {
             test: /[\\/]node_modules[\\/]/,
             chunks: 'initial',
-            name: 'vendor',
+            name: 'vendors',
             minChunks: 1,
             priority: 10
           }

package/ssrConfig/build.js

@@ -51,15 +51,9 @@ build()
         // eslint-disable-next-line no-console
         console.log(serverInfo.warnings.join('\n\n'));
         // eslint-disable-next-line no-console
-        console.log(
-          `\nSearch for the ${chalk.underline(
-            chalk.yellow('keywords')
-          )} to learn more about each warning.`
-        );
+        console.log(`\nSearch for the ${chalk.underline(chalk.yellow('keywords'))} to learn more about each warning.`);
         // eslint-disable-next-line no-console
-        console.log(
-          `To ignore, add ${chalk.cyan('// eslint-disable-next-line')} to the line before.\n`
-        );
+        console.log(`To ignore, add ${chalk.cyan('// eslint-disable-next-line')} to the line before.\n`);
       } else {
         // eslint-disable-next-line no-console
         console.log(chalk.green('Compiled successfully.\n'));

package/ssrConfig/server.js

@@ -3,9 +3,9 @@ const open = require('open');
 const webpack = require('webpack');
 const appConfig = require('../common/appConfig');
 const getEnvironmentInfo = require('../common/extendEnv');
+const { getProjectPath, parseArgsToJson } = require('../common/utils');
 const clientConfigFactory = require('./webpack.dev.client');
 const serverConfigFactory = require('./webpack.dev.server');
-const { getProjectPath, parseArgsToJson } = require('../common/utils');
 
 const extendEnv = getEnvironmentInfo(true);
 const clientConfig = clientConfigFactory(appConfig, extendEnv);
@@ -78,8 +78,7 @@ function run() {
       const info = stats.toJson({
         assets: false,
         hash: false,
-        colors: false,
-        warningsFilter: warn => warn.indexOf('Conflicting order between:') > -1
+        colors: false
       });
       if (stats.hasErrors()) {
         // eslint-disable-next-line no-console
@@ -87,8 +86,13 @@ function run() {
       }
 
       if (stats.hasWarnings()) {
-        // eslint-disable-next-line no-console
-        info.warnings.forEach(item => console.log(item));
+        info.warnings.forEach(item => {
+          if (item && item.message && item.message.indexOf('Conflicting order') > -1) {
+            return;
+          }
+          // eslint-disable-next-line no-console
+          console.log(item);
+        });
       }
     }
 

package/ssrConfig/start.js

@@ -1,4 +1,4 @@
-const webpackFactory = require('./webpack.dev');
 const openStartRun = require('../common/start');
+const webpackFactory = require('./webpack.dev');
 
 openStartRun(webpackFactory);

package/ssrConfig/webpack.base.js

@@ -1,6 +1,4 @@
-const webpack = require('webpack');
-const merge = require('webpack-merge');
-const path = require('path');
+const { merge } = require('webpack-merge');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const webpackCommon = require('../common/webpack.common');
 
@@ -13,34 +11,13 @@ module.exports = (appConfig, extendEnv, { isServer, isHotServer, isSetCommonAlia
   };
   if ((isProd || isHotServer) && !isServer) {
     result.plugins.push(
-      // modules Id 随机数导致缓存失效
-      new webpack.HashedModuleIdsPlugin(),
-      // 解决新旧版本迭代时，google cache 旧版不能正常运行js
-      // 通过指定chunk name而不是随机数
-      new webpack.NamedChunksPlugin(chunk => {
-        if (chunk.name) {
-          return chunk.name;
-        }
-
-        // eslint-disable-next-line no-underscore-dangle
-        return [...chunk._modules]
-          .map(m =>
-            path.relative(m.context, m.userRequest.substring(0, m.userRequest.lastIndexOf('.')))
-          )
-          .join('_');
-      }),
       new MiniCssExtractPlugin({
         // filename: isHotServer ? 'css/[name].css' : `css/[name].css?v=${env.version}`,
         // 采用AMP 直接 把css 填充到html
-        filename: isHotServer ? 'css/[name].css' : 'css/[name][contenthash].css',
-        allChunks: !isHotServer,
-        ignoreOrder: true
+        filename: isHotServer ? 'css/[name].css' : 'css/[name][contenthash:8].css'
       })
     );
   }
 
-  return merge(
-    webpackCommon(appConfig, extendEnv, { isProd, isServer, isHotServer, isSetCommonAlias }),
-    result
-  );
+  return merge(webpackCommon(appConfig, extendEnv, { isProd, isServer, isHotServer, isSetCommonAlias }), result);
 };

package/ssrConfig/webpack.dev.client.js

@@ -1,9 +1,9 @@
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const LoadablePlugin = require('@loadable/webpack-plugin');
-const baseConfig = require('./webpack.base');
 const { getProjectPath } = require('../common/utils');
+const baseConfig = require('./webpack.base');
 
-module.exports = function(appConfig, extendEnv) {
+module.exports = function (appConfig, extendEnv) {
   return merge(
     baseConfig(appConfig, extendEnv, {
       isServer: false,
@@ -14,8 +14,10 @@ module.exports = function(appConfig, extendEnv) {
     {
       // 入口文件
       entry: getProjectPath(appConfig.hotSsrClientEntry),
-      node: {
-        fs: 'empty'
+      resolve: {
+        fallback: {
+          fs: false
+        }
       },
       // 输出信息
       output: {

package/ssrConfig/webpack.dev.js

@@ -1,13 +1,13 @@
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ip = require('ip');
-const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
-const baseConfig = require('./webpack.base');
+const FriendlyErrorsPlugin = require('@soda/friendly-errors-webpack-plugin');
 const { getProjectPath } = require('../common/utils');
+const baseConfig = require('./webpack.base');
 
 const HOST = process.env.HOST || ip.address() || 'localhost';
 
-module.exports = function(appConfig, extendEnv) {
+module.exports = function (appConfig, extendEnv) {
   return merge(
     baseConfig(appConfig, extendEnv, {
       isServer: false,
@@ -21,8 +21,7 @@ module.exports = function(appConfig, extendEnv) {
         publicPath: appConfig.startOutput.publicPath || '/',
         path: appConfig.startOutput.path,
         pathinfo: true,
-        futureEmitAssets: true,
-        filename: 'bundle.js',
+        filename: '[name].js',
         chunkFilename: '[name].chunk.js'
       },
       plugins: [
@@ -42,8 +41,10 @@ module.exports = function(appConfig, extendEnv) {
           template: getProjectPath(appConfig.htmlPluginTemplate)
         })
       ],
-      node: {
-        fs: 'empty'
+      resolve: {
+        fallback: {
+          fs: false
+        }
       },
       optimization: {
         minimize: false,

package/ssrConfig/webpack.dev.server.js

@@ -1,11 +1,9 @@
-const webpack = require('webpack');
-// eslint-disable-next-line import/no-extraneous-dependencies
 const nodeExternals = require('webpack-node-externals');
-const merge = require('webpack-merge');
-const baseConfig = require('./webpack.base');
+const { merge } = require('webpack-merge');
 const { getProjectPath } = require('../common/utils');
+const baseConfig = require('./webpack.base');
 
-module.exports = function(appConfig, extendEnv) {
+module.exports = function (appConfig, extendEnv) {
   return merge(
     baseConfig(appConfig, extendEnv, {
       isServer: true,
@@ -19,7 +17,7 @@ module.exports = function(appConfig, extendEnv) {
       // 避免把 node_modules包下的第三方模块中包含的 nodejs内置的模块打包到出书文件中
       externals: nodeExternals({
         // 当然外部的css还是可以打进来的
-        whitelist: /\.(js|css|less|scss|png|jpg|jpeg)$/
+        allowlist: /\.(js|css|less|scss|png|jpg|jpeg)$/
       }),
       // 入口文件
       entry: getProjectPath(appConfig.hotSsrServerEntry),
@@ -39,7 +37,7 @@ module.exports = function(appConfig, extendEnv) {
                 test: /\.(scss|css|sass)$/,
                 use: [
                   {
-                    loader: 'ignore-loader'
+                    loader: require.resolve('ignore-loader')
                   }
                 ]
               }
@@ -47,7 +45,6 @@ module.exports = function(appConfig, extendEnv) {
           }
         ]
       },
-      plugins: [new webpack.ContextReplacementPlugin(/any-promise/)],
       // 避免路径丢失
       node: {
         __filename: true,

package/ssrConfig/webpack.prod.client.js

@@ -1,16 +1,13 @@
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const LoadablePlugin = require('@loadable/webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-// eslint-disable-next-line import/no-extraneous-dependencies
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const safePostCssParser = require('postcss-safe-parser');
-const baseConfig = require('./webpack.base');
-
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { getProjectPath } = require('../common/utils');
+const baseConfig = require('./webpack.base');
 
 const isCommonBuild = process.env.REACT_APP_BUILD_TYPE === 'common';
 
-module.exports = function(appConfig, extendEnv) {
+module.exports = function (appConfig, extendEnv) {
   return merge(
     baseConfig(appConfig, extendEnv, {
       isServer: false,
@@ -29,8 +26,10 @@ module.exports = function(appConfig, extendEnv) {
         // 非入口文件生产的js
         chunkFilename: `js/[name].js?v=${extendEnv.version}`
       },
-      node: {
-        fs: 'empty'
+      resolve: {
+        fallback: {
+          fs: false
+        }
       },
       plugins: [
         new LoadablePlugin({
@@ -44,21 +43,28 @@ module.exports = function(appConfig, extendEnv) {
         minimizer: [
           // 压缩js
           new TerserPlugin({
-            cache: true,
-            parallel: true,
-            sourceMap: true
-          }),
-
-          // 压缩css
-          new OptimizeCSSAssetsPlugin({
-            cssProcessorOptions: {
-              parser: safePostCssParser,
-              map: {
-                inline: false,
-                annotation: false
+            terserOptions: {
+              parse: {
+                ecma: 8
+              },
+              compress: {
+                ecma: 5,
+                warnings: false,
+                comparisons: false,
+                inline: 2
+              },
+              mangle: {
+                safari10: true
+              },
+              output: {
+                ecma: 5,
+                comments: false,
+                ascii_only: true
               }
             }
-          })
+          }),
+          // 压缩css
+          new CssMinimizerPlugin()
         ],
         splitChunks: {
           chunks: 'initial',
@@ -66,7 +72,6 @@ module.exports = function(appConfig, extendEnv) {
           maxAsyncRequests: 5,
           maxInitialRequests: 3,
           automaticNameDelimiter: '~',
-          name: true,
           cacheGroups: {
             common: {
               chunks: 'async',

package/ssrConfig/webpack.prod.server.js

@@ -1,12 +1,11 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 const nodeExternals = require('webpack-node-externals');
-const merge = require('webpack-merge');
-const baseConfig = require('./webpack.base');
+const { merge } = require('webpack-merge');
 const { getProjectPath } = require('../common/utils');
+const baseConfig = require('./webpack.base');
 
 const isCommonBuild = process.env.REACT_APP_BUILD_TYPE === 'common';
 
-module.exports = function(appConfig, extendEnv) {
+module.exports = function (appConfig, extendEnv) {
   return merge(
     baseConfig(appConfig, extendEnv, {
       isServer: true,
@@ -32,7 +31,7 @@ module.exports = function(appConfig, extendEnv) {
                 test: /\.(scss|css|sass)$/,
                 use: [
                   {
-                    loader: 'ignore-loader'
+                    loader: require.resolve('ignore-loader')
                   }
                 ]
               }
@@ -43,7 +42,7 @@ module.exports = function(appConfig, extendEnv) {
       // 服务端打包的时候忽略外部的npm包
       externals: nodeExternals({
         // 当然外部的css还是可以打进来的
-        whitelist: /\.(css|less|scss)$/
+        allowlist: /\.(css|less|scss)$/
       })
     }
   );