webpack5-vue3-ts

--- theme: orange highlight: a11y-dark --- ## 目录 1. 前言 2. 初始化项目 3. webpack基础配置 4. webpack开发环境配置 5. webpack打包环境配置 6. 参考 ## 一. 前言本文是专栏[【前端工程化】webpack5+vue3+ts+代码规范构建企业级前端项目](https://juejin.cn/column/7246709214508105785)系列第一篇，会详细讲解手动初始化**vue3+ts**项目，并使用**webpack5**配置基础版**vue3**+**ts**环境。本系列文章将使用最新的**webpack5**一步一步从零搭建一个完整的**vue3+ts**开发和打包环境，配置完善**构建速度**和**构建结果**的优化配置，以及配置完善的代码规范和git提交规范。完整代码已上传到[webpack5-vue3-ts](https://github.com/guojiongwei/webpack5-vue3-ts.git)。全系列文章： 1. [《第一篇：基础功能配置，webpack5配置**vue3**+**ts**基础环境，实现dev开发和打包构建》](https://juejin.cn/post/7246777949100245049)。 2. [《第二篇：进阶功能配置，环境变量，**支持css**，**less**，图片和媒体资源，**css3前缀**，**babel**兼容》](https://juejin.cn/post/7246777426666864677)。 3. [《第三篇：优化构建速度：构建耗时分析，持久化缓存，多线程**loader**，**devtool**，**loader**作用范围》](https://juejin.cn/spost/7248242792283029560)。 4. [《第四篇：优化化构建结果：构建结果分析，抽离css文件，压缩css，**js**文件，hash合理配置，代码分割，**tree-shaking**清理**css**和**js**，打包生成**gzip**》](https://juejin.cn/post/7248995705291882553)。 5. 代码格式规范：**editorconfig**统一编辑器配置，**prettier**自动格式化代码，**stylelint**规范样式和保存自动修复，代码提交自动格式化**css**和**js**代码等。 6. 代码语法规范：**eslint**检测**js**代码语法，**style-lint**检测样式代码语法，使用**tsc**检测类型报错，**lint-staged**按需检测代码等。 7. **git**提交规范：代码提交时**husky**检测代码语法规范，代码提交时**husky**检测**commit**备注规范，**commitizen**配置**commit**辅助信息等。 **全系列概览** ![xmind1-comon.jpeg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/54c96ef2540846d8bb904a5e1cf3591c~tplv-k3u1fbpfcp-watermark.image?) ## 二. 初始化项目在开始**webpack**配置之前，先手动初始化一个基本的**vue3**+**ts**项目，新建项目文件夹**webpack5-vue3-ts**, 在项目下执行 ```bash npm init -y ``` 初始化好**package.json**后,在项目下新增以下所示目录结构和文件 ```yaml ├── build | ├── webpack.base.js # 公共配置 | ├── webpack.dev.js # 开发环境配置 | └── webpack.prod.js # 打包环境配置 ├── public │ └── index.html # html模板 ├── src | ├── App.vue │ └── index.ts # vue3应用入口页面 ├── tsconfig.json # ts配置 └── package.json ``` 安装**webpack**依赖 ```yaml npm i webpack@5.85.1 webpack-cli@5.1.3 -D ``` 安装**vue3**依赖 ```yaml npm i vue@^3.3.4 -S ``` 添加**public/index.html**内容 ```html webpack5-vue3-ts

``` 添加**tsconfig.json**内容 ```json { "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "module": "ESNext", "lib": ["ES2020", "DOM", "DOM.Iterable"], "skipLibCheck": true, /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "preserve", /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"], } ``` 添加**src/App.vue**内容 ```vue ``` 添加**src/index.ts**内容 ```ts import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#root') ``` 现在项目业务代码已经添加好了,接下来可以配置**webpack**的代码了。 ## 三. webpack公共配置修改**webpack.base.js** ### 3.1. 配置入口文件 ```js // build/webpack.base.js const path = require('path') module.exports = { entry: path.join(__dirname, '../src/index.ts'), // 入口文件 } ``` ### 3.2 配置出口文件 ```js // build/webpack.base.js const path = require('path') module.exports = { // ... // 打包文件出口 output: { filename: 'static/js/[name].js', // 每个输出js的名称 path: path.join(__dirname, '../dist'), // 打包结果输出路径 clean: true, // webpack4需要配置clean-webpack-plugin来删除dist文件,webpack5内置了 publicPath: '/' // 打包后文件的公共前缀路径 }, } ``` ### 3.3 配置loader解析ts和vue 由于**webpack**默认只能识别**js**文件,不能识别**vue**和**ts**文件，需要借助 [**vue-loader**](https://www.npmjs.com/package/vue-loader) 来识别**vue**语法。ts文件可以借助**babel-loader**的预设预设 [**@babel/preset-typescript**](https://www.npmjs.com/package/vue-loader) 来先**ts**语法转换为**js** 语法。 **安装babel核心模块和babel预设以及vue-loader** ```yaml npm i babel-loader@^9.1.2 @babel/core@^7.22.5 @babel/preset-env@^7.22.5 @babel/preset-typescript@^7.22.5 vue-loader@^17.2.2 -D ``` 在**webpack.base.js**的**module.rules**配置**vue-loader**和和**babel-loader**对应插件配置 ```js // build/webpack.base.js const { VueLoaderPlugin } = require('vue-loader') module.exports = { // ... module: { rules: [ { test: /\.vue$/, // 匹配.vue文件 use: 'vue-loader', // 用vue-loader去解析vue文件 }, { test: /\.ts$/, // 匹配.ts文件 use: { loader: 'babel-loader', options: { presets: [ [ "@babel/preset-typescript", { allExtensions: true, //支持所有文件扩展名(重要) }, ], ] } } } ] }, plugins: [ // ... new VueLoaderPlugin(), // vue-loader插件 ] } ``` 单文件.vue文件被 vue-loader 解析三个部分，script 部分会由 ts 来处理，但是ts不会处理 .vue 结尾的文件，所以要在预设里面加上 allExtensions: true配置项来支持所有文件扩展名。 ### 3.4. 配置extensions **extensions**是**webpack**的**resolve**解析配置下的选项，在引入模块时不带文件后缀时，会来该配置数组里面依次添加后缀查找文件。修改**webpack.base.js**，注意把高频出现的文件后缀放在前面 ```js // build/webpack.base.js module.exports = { // ... resolve: { extensions: ['.vue', '.ts', '.js', '.json'], } } ``` 这里只配置**js**, **vue**和**ts和json**，其他文件引入都要求带后缀，可以提升构建速度。 ### 3.5. 添加html-webpack-plugin插件 **webpack**需要把最终构建好的静态资源都引入到一个**html**文件中,这样才能在浏览器中运行,[html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin)就是来做这件事情的,安装依赖： ```sh npm i html-webpack-plugin -D ``` 因为该插件在开发和构建打包模式都会用到,所以还是放在公共配置**webpack.base.js**里面 ```js // build/webpack.base.js const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { // ... plugins: [ // ... new HtmlWebpackPlugin({ template: path.resolve(__dirname, '../public/index.html'), // 模板取定义root节点的模板 inject: true, // 自动注入静态资源 }) ] } ``` 到这里一个最基础的**vue3**基本公共配置就已经配置好了,需要在此基础上分别配置开发环境和打包环境了。 ## 四. webpack开发环境配置 ### 4.1. 安装 webpack-dev-server 开发环境配置代码在**webpack.dev.js**中,需要借助 [webpack-dev-server](https://www.npmjs.com/package/webpack-dev-server)在开发环境启动服务器来辅助开发,还需要依赖[webpack-merge](https://www.npmjs.com/package/webpack-merge)来合并基本配置,安装依赖: ```yaml npm i webpack-dev-server webpack-merge -D ``` 修改**webpack.dev.js**代码, 合并公共配置，并添加开发模式配置 ```js // build/webpack.dev.js const path = require('path') const { merge } = require('webpack-merge') const baseConfig = require('./webpack.base.js') // 合并公共配置,并添加开发环境配置 module.exports = merge(baseConfig, { mode: 'development', // 开发模式,打包更加快速,省了代码优化步骤 devtool: 'eval-cheap-module-source-map', // 源码调试模式,后面会讲 devServer: { port: 3000, // 服务端口号 compress: false, // gzip压缩,开发环境不开启,提升热更新速度 hot: true, // 开启热更新，后面会讲vue3模块热替换具体配置 historyApiFallback: true, // 解决history路由404问题 static: { directory: path.join(__dirname, "../public"), //托管静态资源public文件夹 } } }) ``` ### 4.2. package.json添加dev脚本在**package.json**的**scripts**中添加 ```js // package.json "scripts": { "dev": "webpack-dev-server -c build/webpack.dev.js" }, ``` **-c 是 --config的缩写，是指定webpack-dev-server的配置文件。** 执行**npm run dev**,就能看到项目已经启动起来了,访问,就可以看到项目界面,具体完善的**vue3**模块热替换在下面会讲到。 ## 五. webpack打包环境配置 ### 5.1. 修改webpack.prod.js代码 ```js // build/webpack.prod.js const { merge } = require('webpack-merge') const baseConfig = require('./webpack.base.js') module.exports = merge(baseConfig, { mode: 'production', // 生产模式,会开启tree-shaking和压缩代码,以及其他优化 }) ``` ### 5.2. package.json添加build打包命令脚本在**package.json**的**scripts**中添加**build**打包命令 ```js "scripts": { "dev": "webpack-dev-server -c build/webpack.dev.js", "build": "webpack -c build/webpack.prod.js" }, ``` 执行**npm run build**,最终打包在**dist**文件中, 打包结果: ```yaml dist ├── static | ├── js | ├── main.js ├── index.html ``` ### 5.3. 浏览器查看打包结果打包后的**dist**文件可以在本地借助**node**服务器**serve**打开,全局安装**serve** ```yaml npm i serve -g ``` 然后在项目根目录命令行执行**serve -s dist**,就可以启动打包后的项目了。到现在一个基础的支持**vue3**和**ts**的**webpack5**就配置好了,但只有这些功能是远远不够的,还需要继续添加其他配置。文章系列： 1. [《第一篇：基础功能配置，webpack5配置**vue3**+**ts**基础环境，实现dev开发和打包构建》](https://juejin.cn/post/7246777949100245049)。 2. [《第二篇：进阶功能配置，环境变量，**支持css**，**less**，图片和媒体资源，**css3前缀**，**babel**兼容》](https://juejin.cn/post/7246777426666864677)。 3. [《第三篇：优化构建速度：构建耗时分析，持久化缓存，多线程**loader**，**devtool**，**loader**作用范围》](https://juejin.cn/spost/7248242792283029560)。 4. [《第四篇：优化化构建结果：构建结果分析，抽离css文件，压缩css，**js**文件，hash合理配置，代码分割，**tree-shaking**清理**css**和**js**，打包生成**gzip**》](https://juejin.cn/post/7248995705291882553)。 5. 代码格式规范：**editorconfig**统一编辑器配置，**prettier**自动格式化代码，**stylelint**规范样式和保存自动修复，代码提交自动格式化**css**和**js**代码等。 6. 代码语法规范：**eslint**检测**js**代码语法，**style-lint**检测样式代码语法，使用**tsc**检测类型报错，**lint-staged**按需检测代码等。 7. **git**提交规范：代码提交时**husky**检测代码语法规范，代码提交时**husky**检测**commit**备注规范，**commitizen**配置**commit**辅助信息等。 ## 参考 1. [webpack官网](https://www.webpackjs.com/) 2. [babel官网](https://www.babeljs.cn/) 3. [【万字】透过分析 webpack 面试题，构建 webpack5.x 知识体系](https://juejin.cn/post/7023242274876162084) 4. [Babel 那些事儿](https://juejin.cn/post/6992371845349507108) 5. [阔别两年，webpack 5 正式发布了！](https://juejin.cn/post/6882663278712094727)