typescrip webpack如何配置


您的位置:首页>技术疑问> 内容正文

typescrip webpack如何配置

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

前提:

cmd窗口安装typescript和cnmp

  • 全局安装typescript:npm install -g typescript

  • 安装淘宝镜像:npm install -g cnpm --registry=https://registry.npmmirror.com

vscode控制台安装插件和相关:

步骤

  1. 下载package.json:npm init -y

  2. cnpmwebpack  webpack-cli typescript ts-loader

  3. cnpm i -D html-webpack-plugin:用来创建模板

  4. cnpm i -D webpack-dev-server:浏览器自动打开

  5. cnpm i -D clean-webpack-plugin:是删除webpack打包后的文件夹以及文件

  6. cnpm i -D  @babel/core @babel/preset-env babel-loader core-js:安装babel:

  7. 创建webpack.config.js文件,编辑配置信息

  8. 在项目文件根目录中运行tsc --init 创建tsconfig.json

  9. 执行打包:npm run bulid

  10. 启动: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 <!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 </html>

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

运行效果:

typescrip webpack如何配置

感谢各位的阅读,以上就是“typescrip webpack如何配置”的内容了,经过本文的学习后,相信大家对typescrip webpack如何配置这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是美国cn2,小编将为大家推送更多相关知识点的文章,欢迎关注!

发布时间:2022-10-26

统计代码