从0到1搭建webpack5+vue2.7+ts脚手架

从0到1搭建webpack5+vue2.7+ts脚手架

背景

目前公司用的是基于 vue-cli4 开发的脚手架，在vue-cli的基础增加了业务开发的 多语言、多皮肤，以及接口请求，权限等解决方案，能快速搭建项目的基本结构。

但随着技术的迭代，vue2.7/vue3的推出（composition-api），vite的发展，以及vue-cli的不维护，webpack5（缓存+模块联邦）的推出，目前这套脚手架确实有些老旧，需要升级。

使用过 vue3+ts+vite 的开发体验还是很丝滑，但目前的公司的情况上这套解决方案，还面临一些问题。下面讨论一些方案的选择：

• vite

vite带来的开发体验的提升，目前的生态发展也是不错的；

使用 vite 搭建工程，但集成公司所有的组件库会有一些问题，而且很多插件还需重新开发，目前不适合迁移到vite。

• webpack5

webpack5 带来的 cache 特性，是一个折中的方案，webpack 的兼容性不用多说，同时缓存也可以提高开发启动的速度，提升开发体验。同时可搭配 esbuild-loader 代替 babel-loader ，提升构建速度。

• vue3

vue3的升级带来的生态割裂，导致组件库的如果直接想要迁移很麻烦。公司的组件库短期应该不会有 vue3 版本。

• vue2.7

vue官方推出 vue2.7，虽然今年就不维护了，但可使用 composition-api，目前来说体验还是不错的，但有一些小问题不维护了，整体上还是值得升级的。

• ts

vue2.6 如果要使用 ts，要使用装饰器写法，这种风格也不再推荐；使用 composition-api 搭配 ts 体验还是不错的。ts 虽然一开始写起来有些痛苦，解决各种报错，但是长期来讲可大大提高项目的可维护性。

基于以上情况的分析和讨论，我基于webpack5+vue2.7+typescript 搭建了项目脚手架，同时使用了 esbuild-loader, 提升了构建速度，下面开始详细介绍如何从0到1 搭建一个脚手架。

安装依赖

只列出一些重要的依赖，一些loader和plugin后面会介绍：

• vue 2.7.14
• pinia
• vue-loader 15.10.1 ：注意vue2只能v15
• webpack 、webpack-cli、webapck-dev-server最新版本

环境和配置文件

从 package.json 的命令开始

json复制代码{
  "scripts": {
    "dev": "webpack serve --env development",
    "build": "webpack --env production",
    "build:check": "run-p typecheck build:only",
    "typecheck": "vue-tsc --noEmit",
    "lint": "eslint . --ext .js,.mjs,.ts,.vue --fix --ignore-path .gitignore",
  }
 }

区分两个环境：production和development

根目录的webpack.config.js

javascript复制代码const prodConfig = require('./config/webpack.prod.js');
const devConfig = require('./config/webpack.dev.js');
const { loadClientEnv } = require('./config/env.js');

module.exports = env => {
  // 根据 env 加载不同的配置文件
  return env.production ? prodConfig() : devConfig();
};

接下来就编写webpack config文件：配置文件分为 webpack.prod.js 和 webpack.dev.js，以及公用配置 webpack.base.js，通过webpack-merge进行合并。

webpack.base.js

javascript复制代码mod