typescrip+webpack如何配置

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   }
26

1 
 2 
 3 
 4 
 5     
 6     
 7 
 8 
 9  我是一個(gè)div

index.ts:

1 function sum (a:number,b:number):number{
2     return a+b;
3 }
4

webpack.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"http://生成一個(gè)模板
68         })
69         // , new CleanWebpackPlugin(),
70     ],
71     //用來(lái)設(shè)置引用模塊
72     resolve:{
73         extensions:['.ts','.js']
74     }
75 
76

tsconfig.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)格檢查的總開(kāi)關(guān)，它是true,所有的嚴(yán)格檢查都開(kāi)啟，它是false，,所有的嚴(yán)格檢查都開(kāi)關(guān)閉，推薦開(kāi)啟
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)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！