共計(jì) 4416 個(gè)字符，預(yù)計(jì)需要花費(fèi) 12 分鐘才能閱讀完成。
這篇文章主要講解了“typescrip+webpack 如何配置”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著丸趣 TV 小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“typescrip+webpack 如何配置”吧！
前提：
cmd 窗口安裝 typescript 和 cnmp
全局安裝 typescript:npm install -g typescript
安裝淘寶鏡像:npm install -g cnpm –registry=https://registry.npmmirror.com
vscode 控制臺(tái)安裝插件和相關(guān)：
步驟
下載 package.json：npm init -y
cnpmwebpack webpack-cli typescript ts-loader
cnpm i -D html-webpack-plugin: 用來(lái)創(chuàng)建模板
cnpm i -D webpack-dev-server：瀏覽器自動(dòng)打開
cnpm i -D clean-webpack-plugin：是刪除 webpack 打包后的文件夾以及文件
cnpm i -D @babel/core @babel/preset-env babel-loader core-js：安裝 babel：
創(chuàng)建 webpack.config.js 文件，編輯配置信息
在項(xiàng)目文件根目錄中運(yùn)行 tsc –init 創(chuàng)建 tsconfig.json
執(zhí)行打包：npm run bulid
啟動(dòng)：npm start
package.json 中的相關(guān)配置：
package.json 中，script 中添加
build : webpack –mode development ,（編譯）
start : webpack server –open chrome.exe (瀏覽器自動(dòng)打開)
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
創(chuàng)建 dis 文件夾、index.html 和 index.ts 模板:
文件目錄：
index.html:
1 !DOCTYPE html
2 html
3
4 head
5 meta charset= UTF-8
6 title 網(wǎng)頁(yè)模板 /title
7 /head
8
9 div id= box1 我是一個(gè) div /div
10
11 /htmlindex.ts:
1 function sum (a:number,b:number):number{
2 return a+b;
3 }
4webpack.config.js
1 // 引入一個(gè)包
2 const path = require( path
3 // 實(shí)時(shí)自動(dòng)構(gòu)建，自動(dòng)刷新瀏覽器
4 const HTMLWebpackPlugin = require( html-webpack-plugin
5 const {CleanWebpackPlugin} = require( clean-webpack-plugin
6
7 //webpack 中的所有的配置信息都應(yīng)該寫在 module.exports 中
8 module.exports ={
9 // 代表 webpack 運(yùn)行的模式，可選值有兩個(gè) 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 不使用箭頭函數(shù)
20 environment:{
21 arrowFunction:false
22 }
23 },
24 // 指定 webpack 打包時(shí)要使用的模板
25 module:{
26 // 指定加載的規(guī)則
27 rules:[{
28 //test 指定的是規(guī)則生效的文件
29 test:/\.ts$/,
30 // 要使用的 loader, 執(zhí)行順序：從后往前
31 use:[
32 // 配置 babel
33 {
34 // 指定加載器
35 loader: babel-loader ,
36 options:{
37 // 指定預(yù)定義環(huán)境
38 presets:[
39 [
40 // 指定環(huán)境插件
41 @babel/preset-env ,
42 // 配置信息
43 {
44 // 要兼容的目標(biāo)瀏覽器
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 // 生成一個(gè)模板
68 })
69 // , new CleanWebpackPlugin(),
70 ],
71 // 用來(lái)設(shè)置引用模塊
72 resolve:{73 extensions:[ .ts , .js]
74 }
75
76tsconfig.js
1 /*
2 tsconfig.json 是 ts 編譯器的配置文件，ts 編譯器可以根據(jù)它的信息來(lái)對(duì)代碼進(jìn)行編譯
3 include 用來(lái)指定哪些 ts 文件需要被編譯 ** 代表任意目錄，* 表示任意文件
4 include :[
5 .src/**//*
6 ]
7
8 exclude: 表示不需要被編譯的文件目錄
9 include :[
10 .src/hello/**//*
11 ]
12 extends: 定義被繼承的配置文件
13 extends : ./configs/base
14
15 compilerOptions 編譯器的選項(xiàng)
16
17 **/
18
19
20 {
21 compilerOptions : {// compilerOptions 編譯器的選項(xiàng)
22
23 target : es2016 , // 用來(lái)指定 ts 被編譯的 ES 版本 /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
24
25 module : commonjs , // 模塊指定要使用的模塊化的規(guī)范 /* Specify what module code is generated. */
26 // lib :[],//lib 用來(lái)指定項(xiàng)目中要使用的庫(kù)，一般不需要?jiǎng)?
27 // outDir : ,// 用來(lái)指定編譯后文件所在的目錄
28 // outFile : ./dist/app.js ,// 將代碼合并為一個(gè)文件，設(shè)置 outFile 后，所有的全局作用域中的代碼會(huì)合并到同一個(gè)文件中
29 // allowJs : false,// 是否對(duì) js 文件編譯，默認(rèn)是 false
30 // checkJs : false,// 是否檢查 js 代碼是否符合語(yǔ)法規(guī)范，默認(rèn)是 false
31 // removeComments : false,// 編譯完的文件是否移除注釋
32 // noEmit : false,// 不生成編譯后的文件
33 // noEmitOnError : false,// 當(dāng)有錯(cuò)誤不生成編譯后的文件
34 // alwaysStrict : false,// 用來(lái)設(shè)置編譯后的文件是否使用嚴(yán)格模式，默認(rèn)是 false
35 // noImplicitAny : false,// 不允許隱試 any 類型，比如函數(shù)的形參，不允許是 any 類型的；36 // noImplicitThis : false,// 不允許不明確類型的 this，比如函數(shù)中的 this
37 // strictNullChecks : false,// 嚴(yán)格檢查空值, 檢出可能存在的空的值
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 // 所有嚴(yán)格檢查的總開關(guān)，它是 true, 所有的嚴(yán)格檢查都開啟，它是 false，, 所有的嚴(yán)格檢查都開關(guān)閉，推薦開啟
42 strict : true, /* Enable all strict type-checking options. */
43 skipLibCheck : true /* Skip type checking all .d.ts files. */
44 }
45運(yùn)行效果：
感謝各位的閱讀，以上就是“typescrip+webpack 如何配置”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì) typescrip+webpack 如何配置這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是丸趣 TV，丸趣 TV 小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
