共计 4416 个字符，预计需要花费 12 分钟才能阅读完成。
这篇文章主要讲解了“typescrip+webpack 如何配置”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着丸趣 TV 小编的思路慢慢深入，一起来研究和学习“typescrip+webpack 如何配置”吧！
前提：
cmd 窗口安装 typescript 和 cnmp
全局安装 typescript:npm install -g typescript
安装淘宝镜像:npm install -g cnpm –registry=https://registry.npmmirror.com
vscode 控制台安装插件和相关：
步骤
下载 package.json：npm init -y
cnpmwebpack webpack-cli typescript ts-loader
cnpm i -D html-webpack-plugin: 用来创建模板
cnpm i -D webpack-dev-server：浏览器自动打开
cnpm i -D clean-webpack-plugin：是删除 webpack 打包后的文件夹以及文件
cnpm i -D @babel/core @babel/preset-env babel-loader core-js：安装 babel：
创建 webpack.config.js 文件，编辑配置信息
在项目文件根目录中运行 tsc –init 创建 tsconfig.json
执行打包：npm run bulid
启动：npm start
package.json 中的相关配置：
package.json 中，script 中添加
build : webpack –mode development ,（编译）
start : webpack server –open chrome.exe (浏览器自动打开)
1 {
2 name : part3 ,
3 version : 1.0.0 ,
4 description : ,
5 main : index.js ,
6 scripts : {
7 build : webpack --mode development ,
8 test : echo \ Error: no test specified\ exit 1 ,
9 start : webpack serve --open
10 },
11 keywords : [],
12 author : ,
13 license : ISC ,
14 devDependencies : {
15 @babel/core : ^7.19.1 ,
16 @babel/preset-env : ^7.19.1 ,
17 babel-loader : ^8.2.5 ,
18 clean-webpack-plugin : ^4.0.0 ,
19 core-js : ^3.25.2 ,
20 ts-loader : ^9.3.1 ,
21 typescript : ^4.8.3 ,
22 webpack : ^5.74.0 ,
23 webpack-cli : ^4.10.0 ,
24 webpack-dev-server : ^4.11.0
25 }
26webpack.config.js
创建 dis 文件夹、index.html 和 index.ts 模板:
文件目录：
index.html:
1 !DOCTYPE html
2 html
3
4 head
5 meta charset= UTF-8
6 title 网页模板 /title
7 /head
8
9 div id= box1 我是一个 div /div
10
11 /htmlindex.ts:
1 function sum (a:number,b:number):number{
2 return a+b;
3 }
4webpack.config.js
1 // 引入一个包
2 const path = require( path
3 // 实时自动构建，自动刷新浏览器
4 const HTMLWebpackPlugin = require( html-webpack-plugin
5 const {CleanWebpackPlugin} = require( clean-webpack-plugin
6
7 //webpack 中的所有的配置信息都应该写在 module.exports 中
8 module.exports ={
9 // 代表 webpack 运行的模式，可选值有两个 developmnet 和 prodution
10 mode: development ,
11 // 指定文件路口
12 entry: path.join(__dirname, ./src/index.ts),
13 // 指定打包文件所在目录
14 output:{
15 // 指定打包文件的目录
16 path:path.resolve(__dirname, dist),
17 // 打包后文件的文件
18 filename: bundle.js ,
19 // 告诉 webpack 不使用箭头函数
20 environment:{
21 arrowFunction:false
22 }
23 },
24 // 指定 webpack 打包时要使用的模板
25 module:{
26 // 指定加载的规则
27 rules:[{
28 //test 指定的是规则生效的文件
29 test:/\.ts$/,
30 // 要使用的 loader, 执行顺序：从后往前
31 use:[
32 // 配置 babel
33 {
34 // 指定加载器
35 loader: babel-loader ,
36 options:{
37 // 指定预定义环境
38 presets:[
39 [
40 // 指定环境插件
41 @babel/preset-env ,
42 // 配置信息
43 {
44 // 要兼容的目标浏览器
45 targets:{
46 chrome : 105
47 },
48 // 指定 codejs 版本
49 corejs : 3 ,
50 // 使用 codejs 的方式
51 useBuiltIns : usage
52 }
53 ]
54
55 ]
56 }
57
58 },
59 ts-loader ],
60 // 要排除的文件
61 exclude:/node-modules/
62 }]
63 },
64 plugins:[
65 new HTMLWebpackPlugin({
66 //title: 自定义
67 template: ./src/index.html // 生成一个模板
68 })
69 // , new CleanWebpackPlugin(),
70 ],
71 // 用来设置引用模块
72 resolve:{73 extensions:[ .ts , .js]
74 }
75
76tsconfig.js
1 /*
2 tsconfig.json 是 ts 编译器的配置文件，ts 编译器可以根据它的信息来对代码进行编译
3 include 用来指定哪些 ts 文件需要被编译 ** 代表任意目录，* 表示任意文件
4 include :[
5 .src/**//*
6 ]
7
8 exclude: 表示不需要被编译的文件目录
9 include :[
10 .src/hello/**//*
11 ]
12 extends: 定义被继承的配置文件
13 extends : ./configs/base
14
15 compilerOptions 编译器的选项
16
17 **/
18
19
20 {
21 compilerOptions : {// compilerOptions 编译器的选项
22
23 target : es2016 , // 用来指定 ts 被编译的 ES 版本 /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
24
25 module : commonjs , // 模块指定要使用的模块化的规范 /* Specify what module code is generated. */
26 // lib :[],//lib 用来指定项目中要使用的库，一般不需要动
27 // outDir : ,// 用来指定编译后文件所在的目录
28 // outFile : ./dist/app.js ,// 将代码合并为一个文件，设置 outFile 后，所有的全局作用域中的代码会合并到同一个文件中
29 // allowJs : false,// 是否对 js 文件编译，默认是 false
30 // checkJs : false,// 是否检查 js 代码是否符合语法规范，默认是 false
31 // removeComments : false,// 编译完的文件是否移除注释
32 // noEmit : false,// 不生成编译后的文件
33 // noEmitOnError : false,// 当有错误不生成编译后的文件
34 // alwaysStrict : false,// 用来设置编译后的文件是否使用严格模式，默认是 false
35 // noImplicitAny : false,// 不允许隐试 any 类型，比如函数的形参，不允许是 any 类型的；36 // noImplicitThis : false,// 不允许不明确类型的 this，比如函数中的 this
37 // strictNullChecks : false,// 严格检查空值, 检出可能存在的空的值
38 esModuleInterop : true,// /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables allowSyntheticDefaultImports for type compatibility. */
39 forceConsistentCasingInFileNames : true, /* Ensure that casing is correct in imports. */
40
41 // 所有严格检查的总开关，它是 true, 所有的严格检查都开启，它是 false，, 所有的严格检查都开关闭，推荐开启
42 strict : true, /* Enable all strict type-checking options. */
43 skipLibCheck : true /* Skip type checking all .d.ts files. */
44 }
45运行效果：
感谢各位的阅读，以上就是“typescrip+webpack 如何配置”的内容了，经过本文的学习后，相信大家对 typescrip+webpack 如何配置这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是丸趣 TV，丸趣 TV 小编将为大家推送更多相关知识点的文章，欢迎关注！
