一、编译期间代码检测

1 引入 fork-ts-checker-webpack-plugin检查ts类型
2 引入 eslint检查代码可能存在的问题
yarn add fork-ts-checker-webpack-plugin --dev
yarn add --dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
3 项目根目录下面新增 .eslinrc.js文件，内容如下：

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  extends: ['plugin:@typescript-eslint/recommended'],
  rules: {
    // place to specify ESLint rules - can be used to overwrite rules specified from the extended configs
    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
};

二、全局样式变量使用

1. 引入 sass-resources-loader
   yarn add --dev sass-resources-loader
   在webpack.dev.js 文件中添加如下一条规则rule，代码如下：

{
        test: /\.less$/i,
        use: [
          'vue-style-loader',
          'css-loader',
          'postcss-loader',
          'less-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              resources: path.resolve(__dirname, '../src/color.less'),
            },
          },
        ],
      },

三、vue模版中代码的检测

1. 以上只是针对.js .ts文件类型的检测，那么基于vue开发的话，需要对.vue文件的代码进行检测，避免一些错误。
2. eslint-plugin-vue插件该粉墨登场了。
3. 安装eslint-plugin-vue插件
   yarn add --dev eslint-plugin-vue
4. 修改.eslintrc.js配置文件

module.exports = {
  // parser: '@typescript-eslint/parser',
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  rules: {
    // 0 = off, 1 = warn, 2 = error
    // place to specify ESLint rules - can be used to overwrite rules specified from the extended configs
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-unused-vars': 0,
    // https://eslint.vuejs.org/rules/
    'vue/component-definition-name-casing': 'off',
    'vue/multi-word-component-names': 'off',
  },
};

四、完结，最后的总结：

1. 本项目基于的技术栈是 webpack@5.60 + vue@2.6以上。
2. 该配置打包工具主要是用于老项目由vue + js开发升级到vue + ts开发的一个过渡阶段产物,目前该套打包脚手架已经在实际工作项目使用中，老项目是基于vue-cli生成的项目，webpack版本为 3.6的，当时尝试着在3.6版本的基础上进行升级，由于各种loader之间的兼容问题，最终放弃，尝试使用webpack5进行升级改造。
3. 打包工具输出的js文件由以下几部分组成：
   3.1. 第三方库单独抽离出来供其他页面使用
   3.2. 对于多个模块用到的大文件，单独打包成一个chunk，
   3.3. 抽离运行时代码。
4. 代码仓库地址：https://github.com/YiGeXiaoBing-520/vue-manual.git
   克隆代码后，切换至第七期对应的分支
   第七期分支代码： develop-v7；
5. 持续研究输出中....