使用 Webpack5 创建 Vue3 + TS 项目

当前使用版本：
"webpack": "^5.33.2",
"webpack-bundle-analyzer": "^4.4.1",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3",

// webpack.dev.js
module.exports = merge(common, {
  cache: {
    type: 'filesystem',
  }
  //...
}

// 当前我使用版本
"vue-loader": "^16.2.0",
"@vue/compiler-sfc": "^3.0.11",

// shims-vue.d.ts
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

// webpack.base.js
// rules
{
    test: /\.(t|j)s$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'ts-loader',
        options: {
          // 指定特定的ts编译配置，为了区分脚本的ts配置
          configFile: path.resolve(__dirname, '../tsconfig.loader.json'),
          // 对应文件添加个.ts或.tsx后缀
          appendTsSuffixTo: [/\.vue$/],
        },
      },
    ],
}

// webpack.base.js
// rules
{
    test: /\.(t|j)s$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'ts-loader',
        options: {
          // 指定特定的ts编译配置，为了区分脚本的ts配置
          configFile: path.resolve(__dirname, '../tsconfig.loader.json'),
          // 对应文件添加个.ts或.tsx后缀
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true, // ? 关闭类型检查，即只进行转译
        },
      },
    ],
}
// plugins push
new ForkTsCheckerWebpackPlugin()

"check-types": "tsc --watch",

# 安装以下依赖 --save-dev
# webpack loader
babel-loader
# babel 核心
@babel/core
# 智能转换成目标运行环境代码
@babel/preset-env
# 解析 typescript 的 babel 预设
@babel/preset-typescript
# polyfill 
@babel/plugin-transform-runtime
# 支持 ts 类的写法
@babel/plugin-proposal-class-properties 
# 支持三点展开符
@babel/plugin-proposal-object-rest-spread

# 安装以下依赖 --save
@babel/runtime
@babel/runtime-corejs3
"core-js": "^3.11.0",

{
    test: /\.(t|j)s$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'babel-loader',
      },
    ],
}

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage', // 按需引入 polyfill
        corejs: 3,
      },
    ],
    [
      '@babel/preset-typescript', // 引用Typescript插件
      {
        allExtensions: true, // 支持所有文件扩展名，否则在vue文件中使用ts会报错
      },
    ],
  ],
  plugins: [
    [
      '@babel/plugin-transform-runtime',
      {
        corejs: 3,
      },
    ],
    '@babel/proposal-class-properties',
    '@babel/proposal-object-rest-spread',
  ],
}

npm i inquirer shelljs @commitlint/{cli,config-conventional} -D

"commitlint": "commitlint -e", 
"commit": "node commit/git-commit.js"

const shell = require('shelljs')
const inquirer = require('inquirer')
const prompsConfig = {
  ciType: [
    {
      type: 'list',
      name: 'type',
      message: '请选择本次提交的类型:',
      choices: [
        {
          name: '引入新特性',
          value: 'feat',
        },
        {
          name: '改进代码的结构格式/样式',
          value: 'style',
        },
        {
          name: '修复 bug',
          value: 'fix',
        },
        {
          name: '提升性能',
          value: 'perf',
        },
        {
          name: '删除代码或文件',
          value: 'delete',
        },
        {
          name: '其他修改, 比如改变构建流程、或者增加依赖库、工具等',
          value: 'chore',
        },
        {
          name: '重构',
          value: 'refactor',
        },
        {
          name: '撰写文档',
          value: 'docs',
        },
        {
          name: '增加测试',
          value: 'test',
        },
        {
          name: '更新打包文件',
          value: 'build',
        },
        {
          name: '初次提交',
          value: 'init',
        },
        {
          name: '发布/版本标签',
          value: 'release',
        },
        {
          name: '部署功能',
          value: 'deploy',
        },
        {
          name: '代码回滚',
          value: 'revert',
        },
        {
          name: 'CI持续集成修改',
          value: 'ci',
        },
      ],
    },
  ],
  ciMsg: {
    type: 'input',
    name: 'msg',
    message: '请输入提交文本:',
    validate: function (value) {
      if (value) {
        return true
      }
      return '文本必须输入!'
    },
  },
}

async function gitCommit() {
  let { type } = await inquirer.prompt(prompsConfig.ciType)
  let { msg } = await inquirer.prompt(prompsConfig.ciMsg)

  shell.exec(`git commit -m "${type}: ${msg}"`, function () {
    console.log(`\n提交脚本: git commit -m "${type}: ${msg}"`)
  })
}

gitCommit()

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [2, 'always', [
      'build', 'chore', 'ci', 'feat', 'docs', 'fix', 'perf', 'revert', 'refactor', 'style', 'test', 'init', 'build', 'release', 'delete'
     ]],
  }
};

language: node_js
node_js:
  - 12
branchs:
  only:
    - master
cache:
  directories:
    - node_modules
install:
  - yarn install
scripts:
  - yarn build
deploy:
  provider: pages
  local_dir: dist
  skip_cleanup: true
  # 在 GitHub 上生成的令牌，允许 Travis 推送代码到你的仓库。
  # 在仓库对应的 Travis 设置页面中配置，用于安全控制。
  github_token: $GITHUB_TOKEN
  keep_history: true
  on:
    branch: master