typescrip webpack如何配置
这篇文章主要讲解了“typescrip webpack如何配置”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“typescrip webpack如何配置”吧!
前提:
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模板:
文件目录:
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如何配置这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是美国cn2,小编将为大家推送更多相关知识点的文章,欢迎关注!