typescrip+webpack如何配置

这篇文章主要讲解了“typescrip+webpack如何配置”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“typescrip+webpack如何配置”吧！

成都创新互联公司专注于企业营销型网站建设、网站重做改版、尼元阳网站定制设计、自适应品牌网站建设、H5建站、电子商务商城网站建设、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为尼元阳等各大城市提供网站开发制作服务。

前提：

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

webpack.config.js

创建dis文件夹、index.html和index.ts模板:

文件目录：

typescrip+webpack如何配置

index.html:

1 
 2 
 3 
 4 
 5     
 6     网页模板
 7 
 8 
 9  我是一个div

10 11

index.ts:

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

webpack.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 
76

tsconfig.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