typescrip+webpack如何配置
这篇文章主要讲解了“typescrip+webpack如何配置”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“typescrip+webpack如何配置”吧！
成都创新互联公司专注于企业营销型网站建设、网站重做改版、尼元阳网站定制设计、自适应品牌网站建设、H5建站、电子商务商城网站建设、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为尼元阳等各大城市提供网站开发制作服务。
前提：
cmd窗口安装typescript和cnmp
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中添加
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
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 }
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如何配置这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！
本文题目：typescrip+webpack如何配置
转载来于：
http://kswsj.cn/article/gijpjd.html
