@autobest-ui/scripts 0.0.4 → 0.1.1

package/common/webpack.common.js

@@ -1,193 +1,218 @@
-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 happyThreadPool = HappyPack.ThreadPool({ size: 5 });
-const sassRegex = /\.(scss|sass)$/;
-const sassModuleRegex = /\.module\.(scss|sass)$/;
-
-function getStyleLoaders({ isProd, isServer, isHotServer, isSass, moduleOption = {} }) {
-  const result = [
-    {
-      loader: 'css-loader',
-      options: {
-        importLoaders: 1,
-        ...moduleOption
-      }
-    },
-    {
-      loader: 'postcss-loader',
-      options: {
-        ident: 'postcss',
-        plugins: () => [
-          require('postcss-flexbugs-fixes'),
-          require('postcss-preset-env')({
-            autoprefixer: {
-              flexbox: 'no-2009',
-              grid: true
-            },
-            stage: 3
-          })
-        ],
-        sourceMap: false
-      }
-    }
-  ];
-
-  if (isSass) {
-    result.push({
-      loader: 'sass-loader'
-    });
-  }
-
-  if ((isProd || isHotServer) && !isServer) {
-    result.unshift({
-      loader: MiniCssExtractPlugin.loader,
-      options: {
-        hmr: false
-      }
-    });
-  }
-
-  if (!isProd && !isHotServer) {
-    result.unshift({
-      loader: 'style-loader'
-    });
-  }
-
-  return result;
-}
-
-module.exports = (appConfig, extendEnv, { isProd, isServer, isHotServer }) => {
-  const result = {
-    // 原始源代码（仅限行）定位到原始代码问题，比source-map 快，但是没有列映射(column mapping)的 source-map
-    devtool: isProd ? 'source-map' : 'cheap-module-source-map',
-    // 会将 process.env.NODE_ENV 的值设为 development, 告知 webpack 使用相应模式的内置优化
-    mode: isProd ? 'production' : 'development',
-    // 打包的出口
-    output: {
-      publicPath: '/'
-    },
-    // 配置各种loader
-    module: {
-      // 警告替换为Error
-      strictExportPresence: true,
-      rules: [
-        {
-          oneOf: [
-            {
-              test: /\.(js|ts|tsx)$/,
-              exclude: /node_modules/,
-              use: 'happypack/loader?id=jsbabel'
-            },
-            {
-              test: sassRegex,
-              exclude: sassModuleRegex,
-              use: getStyleLoaders({
-                isProd,
-                isServer,
-                isHotServer,
-                isSass: true
-              })
-            },
-            {
-              test: sassModuleRegex,
-              use: getStyleLoaders({
-                isProd,
-                isServer,
-                isHotServer,
-                isSass: true,
-                moduleOption: {
-                  getLocalIdent: getCSSModuleLocalIdent,
-                  importLoaders: 2,
-                  modules: true
-                }
-              })
-            },
-            {
-              test: /\.(css)$/,
-              use: getStyleLoaders({
-                isProd,
-                isServer,
-                isHotServer
-              })
-            },
-            {
-              test: [/\.jpe?g$/, /\.png$/, /\.bmp$/, /\.gif$/],
-              loader: 'url-loader',
-              options: {
-                limit: 2048,
-                name: `media/[name].[ext]?v=${extendEnv.version}`
-              }
-            }
-          ]
-        }
-      ]
-    },
-    resolve: {
-      // 设置路径别名
-      alias: appConfig.alias,
-      // 文件后缀自动补全
-      extensions: ['.tsx', '.ts', '.js', 'scss', 'css']
-    },
-    plugins: [
-      new webpack.DefinePlugin(extendEnv.stringified),
-      new ESLintPlugin({
-        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
-      })
-    ]
-  };
-  if (isProd && !isServer) {
-    result.optimization = {
-      minimize: true
-    };
-  }
-
-  return result;
-};
+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)$/;
+
+function getStyleLoaders({ isProd, isServer, isHotServer, isSass, moduleOption = {} }) {
+  const result = [
+    {
+      loader: 'css-loader',
+      options: {
+        importLoaders: 1,
+        ...moduleOption
+      }
+    },
+    {
+      loader: 'postcss-loader',
+      options: {
+        ident: 'postcss',
+        plugins: () => [
+          require('postcss-flexbugs-fixes'),
+          require('postcss-preset-env')({
+            autoprefixer: {
+              flexbox: 'no-2009',
+              remove: false,
+              grid: true
+            },
+            stage: 3
+          })
+        ],
+        sourceMap: false
+      }
+    }
+  ];
+
+  if (isSass) {
+    result.push({
+      loader: 'sass-loader'
+    });
+  }
+
+  if ((isProd || isHotServer) && !isServer) {
+    result.unshift({
+      loader: MiniCssExtractPlugin.loader,
+      options: {
+        hmr: false
+      }
+    });
+  }
+
+  if (!isProd && !isHotServer) {
+    result.unshift({
+      loader: 'style-loader'
+    });
+  }
+
+  return result;
+}
+
+module.exports = (appConfig, extendEnv, { isProd, isServer, isHotServer, isSetCommonAlias }) => {
+  const result = {
+    // 原始源代码（仅限行）定位到原始代码问题，比source-map 快，但是没有列映射(column mapping)的 source-map
+    devtool: isProd ? 'source-map' : 'cheap-module-source-map',
+    // 会将 process.env.NODE_ENV 的值设为 development, 告知 webpack 使用相应模式的内置优化
+    mode: isProd ? 'production' : 'development',
+    // 打包的出口
+    output: {
+      publicPath: '/'
+    },
+    // 配置各种loader
+    module: {
+      // 警告替换为Error
+      strictExportPresence: true,
+      rules: [
+        {
+          oneOf: [
+            {
+              test: /\.(js|ts|tsx)$/,
+              exclude: /node_modules/,
+              use: 'happypack/loader?id=jsbabel'
+            },
+            {
+              test: sassRegex,
+              exclude: sassModuleRegex,
+              use: getStyleLoaders({
+                isProd,
+                isServer,
+                isHotServer,
+                isSass: true
+              })
+            },
+            {
+              test: sassModuleRegex,
+              use: getStyleLoaders({
+                isProd,
+                isServer,
+                isHotServer,
+                isSass: true,
+                moduleOption: {
+                  getLocalIdent: getCSSModuleLocalIdent,
+                  importLoaders: 2,
+                  modules: true
+                }
+              })
+            },
+            {
+              test: /\.(css)$/,
+              use: getStyleLoaders({
+                isProd,
+                isServer,
+                isHotServer
+              })
+            },
+            {
+              test: [/\.jpe?g$/, /\.png$/, /\.bmp$/, /\.gif$/],
+              loader: 'url-loader',
+              options: {
+                limit: 2048,
+                name: `static/[name].[contenthash:8].[ext]?v=${extendEnv.version}`
+              }
+            }
+          ]
+        }
+      ]
+    },
+    resolve: {
+      // 设置路径别名
+      alias: appConfig.alias,
+      // 文件后缀自动补全
+      extensions: ['.tsx', '.ts', '.js', 'scss', 'css']
+    },
+    plugins: [
+      new webpack.DefinePlugin(extendEnv.stringified),
+      new ESLintPlugin({
+        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
+      })
+    ]
+  };
+  if (isProd && !isServer) {
+    result.optimization = {
+      minimize: true
+    };
+  }
+
+  if (isExistsSyncFile(appWebpackConfigPath)) {
+    const extendConfig = require(appWebpackConfigPath);
+    if (typeof extendConfig !== 'function') {
+      throw Error(
+        `Extend webpack config file only functions are supported and return extend result! \n current type is ${typeof extendConfig} \n filename is ${appWebpackConfigPath}`
+      );
+    }
+    const extendResult = extendConfig(result, appConfig, extendEnv, {
+      isProd,
+      isServer,
+      isHotServer,
+      isSetCommonAlias
+    });
+    if (!extendResult) {
+      throw Error(
+        `Return extend result! \n current extendResult is ${extendResult} \n filename is ${appWebpackConfigPath}`
+      );
+    }
+    return extendResult;
+  }
+
+  return result;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobest-ui/scripts",
-  "version": "0.0.4",
+  "version": "0.1.1",
   "private": false,
   "description": "utils for project tools",
   "bin": {
@@ -44,7 +44,6 @@
   },
   "homepage": "https://autobest.visualstudio.com/AutoBestChina/_git/AutobestFrontendCommon#readme",
   "dependencies": {
-    "@autobest-ui/replace-loader": "^0.0.8",
     "@babel/core": "7.13.0",
     "@babel/plugin-proposal-class-properties": "7.12.13",
     "@babel/plugin-proposal-decorators": "7.14.2",
@@ -72,6 +71,7 @@
     "html-webpack-plugin": "4.3.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",
@@ -93,5 +93,5 @@
     "webpack-merge": "^4.2.1",
     "webpack-node-externals": "1.7.2"
   },
-  "gitHead": "a2faeba0025ae27fbec8139138d156574ec694ae"
+  "gitHead": "18fb4398b00aa3322a548f8f87532945a4d51d1e"
 }

package/spaConfig/build.js

@@ -1,65 +1,65 @@
-const webpack = require('webpack');
-const chalk = require('chalk');
-const appConfig = require('../common/appConfig');
-const { runCallback } = require('../common/build');
-const getClientEnvironment = require('../common/extendEnv');
-const webpackFactory = require('./webpack.prod');
-
-process.env.BABEL_ENV = 'production';
-process.env.NODE_ENV = 'production';
-
-process.on('unhandledRejection', err => {
-  // eslint-disable-next-line @typescript-eslint/no-throw-literal
-  throw err;
-});
-
-const extendEnv = getClientEnvironment();
-
-function build() {
-  const config = webpackFactory(appConfig, extendEnv);
-  // eslint-disable-next-line no-console
-  console.log(chalk.green('Creating an optimized production build...'));
-  const compiler = webpack(config);
-  return new Promise((resolve, reject) => {
-    compiler.run(runCallback(resolve, reject));
-  });
-}
-
-build()
-  .then(
-    ({ warnings }) => {
-      if (warnings.length) {
-        // eslint-disable-next-line no-console
-        console.log(chalk.yellow('Compiled with warnings.\n'));
-        // 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.`
-        );
-        // eslint-disable-next-line no-console
-        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'));
-      }
-    },
-    err => {
-      // eslint-disable-next-line no-console
-      console.log(chalk.red('Failed to compile.\n'));
-      // eslint-disable-next-line no-console
-      console.log(err);
-      process.exit(1);
-    }
-  )
-  .catch(err => {
-    // eslint-disable-next-line no-console
-    console.log(chalk.red('Failed to compile.\n'));
-    // eslint-disable-next-line no-console
-    console.log(err);
-    process.exit(1);
-  });
+const webpack = require('webpack');
+const chalk = require('chalk');
+const appConfig = require('../common/appConfig');
+const { runCallback } = require('../common/build');
+const getClientEnvironment = require('../common/extendEnv');
+const webpackFactory = require('./webpack.prod');
+
+process.env.BABEL_ENV = 'production';
+process.env.NODE_ENV = 'production';
+
+process.on('unhandledRejection', err => {
+  // eslint-disable-next-line @typescript-eslint/no-throw-literal
+  throw err;
+});
+
+const extendEnv = getClientEnvironment();
+
+function build() {
+  const config = webpackFactory(appConfig, extendEnv);
+  // eslint-disable-next-line no-console
+  console.log(chalk.green('Creating an optimized production build...'));
+  const compiler = webpack(config);
+  return new Promise((resolve, reject) => {
+    compiler.run(runCallback(resolve, reject));
+  });
+}
+
+build()
+  .then(
+    ({ warnings }) => {
+      if (warnings.length) {
+        // eslint-disable-next-line no-console
+        console.log(chalk.yellow('Compiled with warnings.\n'));
+        // 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.`
+        );
+        // eslint-disable-next-line no-console
+        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'));
+      }
+    },
+    err => {
+      // eslint-disable-next-line no-console
+      console.log(chalk.red('Failed to compile.\n'));
+      // eslint-disable-next-line no-console
+      console.log(err);
+      process.exit(1);
+    }
+  )
+  .catch(err => {
+    // eslint-disable-next-line no-console
+    console.log(chalk.red('Failed to compile.\n'));
+    // eslint-disable-next-line no-console
+    console.log(err);
+    process.exit(1);
+  });

package/spaConfig/start.js

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

package/spaConfig/webpack.base.js

@@ -1,28 +1,28 @@
-const merge = require('webpack-merge');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { getProjectPath } = require('../common/utils');
-const webpackCommon = require('../common/webpack.common');
-
-module.exports = (isProd, appConfig, extendEnv) => {
-  const result = {
-    plugins: [
-      new HtmlWebpackPlugin({
-        inject: true,
-        template: getProjectPath(appConfig.htmlPluginTemplate)
-      })
-    ]
-  };
-
-  if (isProd) {
-    result.plugins.push(
-      new MiniCssExtractPlugin({
-        filename: `css/[name].css?v=${extendEnv.version}`,
-        allChunks: true,
-        ignoreOrder: true
-      })
-    );
-  }
-
-  return merge(webpackCommon(appConfig, extendEnv, { isProd, isServer: false }), result);
-};
+const merge = require('webpack-merge');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { getProjectPath } = require('../common/utils');
+const webpackCommon = require('../common/webpack.common');
+
+module.exports = (isProd, appConfig, extendEnv) => {
+  const result = {
+    plugins: [
+      new HtmlWebpackPlugin({
+        inject: true,
+        template: getProjectPath(appConfig.htmlPluginTemplate)
+      })
+    ]
+  };
+
+  if (isProd) {
+    result.plugins.push(
+      new MiniCssExtractPlugin({
+        filename: `css/[name].css?v=${extendEnv.version}`,
+        allChunks: true,
+        ignoreOrder: true
+      })
+    );
+  }
+
+  return merge(webpackCommon(appConfig, extendEnv, { isProd, isServer: false }), result);
+};