使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（一）搭建编译环境
笔特 | 11/14/2022, 8:02:44 AM | 421 次阅读
1 引言
为了能够更好的理解webpack，特准备了这份从零开始开始搭建教程，不使用官方的脚手架，不使用预定义配置，完全从零开始搭建一个使用 Webpack5 构建的 Vue3 + TypeScript 的项目开发环境。
关键词
- Webpack5
- Vue3
- TypeScript
- JavaScript
文章列表
- 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（一）搭建编译环境
- 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（二）配置HTML模板
- 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（三）添加Vue环境
- 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（四）添加Vue的样式
- 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（五）添加Less支持
- 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（六）添加Vue的TS支持
- 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（七）添加静态文件
- 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（八）不同环境的配置
- 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（九）ES语法转换
假设
在这里假设你已经对 webpack5 vue3 TypeScript JavaScript 的基本概念有一定的了解，知道基本语法。
完整源码地址
Gitee: https://gitee.com/bitem/webpack5-vue3-ts-demo
2 基础环境
开始之前，确保你的电脑已经安装好了以下环境：
- nodejs
- tsc
- yarn 或者使用nodejs自带的npm，我更喜欢使用yarn
# 以下是我用的版本，基本保持大版本号一致即可
PS D:\Git\bitem\demo\webpack> node -v
v16.14.2
PS D:\Git\bitem\demo\webpack> npm -v
8.19.2
PS D:\Git\bitem\demo\webpack> yarn -v
1.22.19
PS D:\Git\bitem\demo\webpack> tsc -v
Version 4.8.4
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
3 初始化项目
3.1 执行初始化
# 初始化npm包配置，按照提示输入即可
npm init
# 初始化tsconfig
tsc --init
1
2
3
4
2
3
4
需要对tsconfig做少量修改
3.2 配置结果
// tsconfig.json，详细配置可深入学习
{
"compilerOptions": {
"target": "ES2020",
"module": "ES2020",
"allowJs": true, //允许编译js
"checkJs": false, //不检查js语法
"removeComments": true, //编译移除注释
"declaration": true, //生产d.ts声明文件
"declarationDir": "dist", //d.ts声明文件路径
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true, // 添加json文件引入支持
"moduleResolution": "node", // 模块解析策略,是指编译器在查找导入模块内容时所遵循的流程
"strict": true,
"skipLibCheck": true
},
// 编译TS包含的文件夹
"include": [
"src"
],
// 编译TS排除的文件夹
"exclude": [
"node_modules"
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// package.json
{
"name": "webpack5-vue3-ts-demo",
"version": "1.0.0",
"description": "使用 Webpack 从零开始搭建 Vue3 + TS 开发环境",
"main": "index.js",
// 使用 esmodule
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"webpack"
],
"author": "liuminahcn@sina.com",
"license": "MIT",
// 依赖的第三方包查看最后的附加说明
"devDependencies": {
"ts-loader": "^9.4.1",
"typescript": "^4.8.4",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"path": "^0.12.7"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
3.3 新建.gitignore
// .gitignore
dist
node_modules
*.log
.env
1
2
3
4
5
2
3
4
5
3.4 安装依赖
# 使用 webpack5
yarn add -D webpack webpack-cli webpack-dev-server
yarn add -D typescript ts-loader
yarn add path
1
2
3
4
2
3
4
3.5 新建webpack.config.cjs
因为
package.json中配置了"type": "module"，所以这里js扩展名要用cjs，表示该文件使用CommonJS规范
const path = require("path")
module.exports = {
entry: "./src/index.ts",
output: {
path: path.resolve(__dirname, 'dist'),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: "/node-modules/"
}
]
},
resolve: {
extensions: [".ts"]
},
mode: "development"
// mode: "production"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
3.6 新建代码
// src/common.ts
function Add(a: number, b: number) {
return a + b
}
const a: number = 1
export { a }
export { Add }
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
// src/index.ts
import { a, Add } from "./common"
console.log(Add(a, 5))
1
2
3
4
2
3
4
4 编译
在vscode的终端输入命令： webpack
注：
webpack配置文件一般使用默认根目录的webpack.config即可，也可以使用--config配置指定特定的配置文件
webpack --config 配置文件路径
5 附加说明
本篇文章所使用的依赖库和版本参考
"devDependencies": {
"css-loader": "^6.7.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"less": "^4.1.3",
"less-loader": "^11.1.0",
"rimraf": "^3.0.2",
"style-loader": "^3.3.1",
"ts-loader": "^9.4.1",
"typescript": "^4.8.4",
"vue-loader": "^17.0.0",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"@vue/compiler-sfc": "^3.2.41",
"copy-webpack-plugin": "^11.0.0",
"path": "^0.12.7",
"vue": "^3.2.41",
"vue-router": "^4.1.5",
"vuex": "^4.1.0"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23