webpack搭建腳手架打包TypeScript代碼
創(chuàng)建文件夾
目錄結(jié)構(gòu): dabaots
初始化 npm init -y
生成package.json文件
目錄結(jié)構(gòu):
dabaots
dabaots / package.json
然后在開(kāi)發(fā)環(huán)境中安裝以下幾個(gè)工具
npm i -D
webpack··························(打包代碼的核心工具
webpack-cli·····················(webpack的命令行工具)
typescript ·······················(寫(xiě)ts所需的核心包)
ts-loader ·························(通過(guò)ts-loader可以對(duì)webpack和ts進(jìn)行整合)
html-webpack-plugin … (是自動(dòng)生成html的一個(gè)webpack插件)
webpack-dev-server … (無(wú)需刷新更新頁(yè)面)
clean-webpack-plugin … ( 每次打包上線(xiàn)之前都會(huì)自動(dòng)清空dist內(nèi)的文件如何重新生成最新的文件)
"@babel/core" “@babel/preset-env” babel-loader core-js(安裝babel轉(zhuǎn)換,你是什么環(huán)境他就會(huì)轉(zhuǎn)成什么代碼)
可能會(huì)遇到的小問(wèn)題:這里可能會(huì)出現(xiàn)的問(wèn)題就是你下載的依賴(lài)包webpack-dev-server版本如果和谷歌的不適配,建議將插件版本改低一點(diǎn)或者谷歌瀏覽器升級(jí)成最新版本否則會(huì)出現(xiàn)錯(cuò)誤Cannot GET /chrome.exe
接下來(lái)創(chuàng)建webpack.config.js進(jìn)行配置
目錄結(jié)構(gòu):
dabaots
dabaots / package.json
dabaots / webpack.config.js
// 引入一個(gè)包 const path = require("path") //引入自動(dòng)生成html的包 const HtmlWebpackPlugin = require("html-webpack-plugin") //引入更新dist文件的插件 const {CleanWebpackPlugin} = require("clean-webpack-plugin") // webpack中的所有的配置信息都應(yīng)該寫(xiě)入moudle.exports中 module.exports={ // 指定入口文件 entry:"./src/index.ts", // 指定打包文件所在目錄 output:{ // 指定打包文件的目錄 path:path.resolve(__dirname,"dist"), // 指定打包后文件的文件 filename:"bundle.js", //編譯的時(shí)候不使用箭頭函數(shù) environment: { arrowFunction: false } }, //webpack打包時(shí)要使用到module這個(gè)模塊 module:{ // 指定要加載的規(guī)則 rules:[{ // test指定的是規(guī)則生效的文件 test:/\.ts$/, // use是要使用的loader //配置babel use:[ {//指定加載器 loader:"babel-loader", options:{ //設(shè)置預(yù)定義環(huán)境 presets:[ [ //指定環(huán)境的插件 "@babel/preset-env", //配置信息 { //要兼容的瀏覽器 targets:{ "chrome":"88" }, // 指定corejs的版本 "corejs":"3", //表示按需加載 "useBuiltIns":"usage" } ] ] } }, 'ts-loader' ], //設(shè)置不被打包上傳的文件 exclude:["/node_modules/"] }] }, // 配置webpack插件 plugins:[ new HtmlWebpackPlugin({ // 自定義html模板地址 template:"./src/index.html" }), //每次打包上線(xiàn)之前都會(huì)自動(dòng)清空dist內(nèi)的文件如何重新生成最新的文件 new CleanWebpackPlugin() ], resolve:{ //解決在ts文件內(nèi)部單獨(dú)引入其他ts包時(shí)候報(bào)錯(cuò)的問(wèn)題 extensions:['.ts','.js'] } }
最后在package.json中寫(xiě)入打包及運(yùn)行等腳本
在終端npm run build
打包運(yùn)行即可
打包成功后會(huì)自動(dòng)生成一個(gè)dist文件
npm run start
自動(dòng)打開(kāi)谷歌瀏覽器且內(nèi)容為熱更新的
到此這篇關(guān)于webpack搭建腳手架打包TypeScript代碼的文章就介紹到這了,更多相關(guān)webpack打包TypeScript代碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 教你使用webpack打包編譯TypeScript代碼
- 從零使用TypeScript開(kāi)發(fā)項(xiàng)目打包發(fā)布到npm
- 解決vue cli使用typescript后打包巨慢的問(wèn)題
- 詳解如何發(fā)布TypeScript編寫(xiě)的npm包
- ESLint規(guī)范TypeScript代碼使用方法
- typescript基本數(shù)據(jù)類(lèi)型HTMLElement與Element區(qū)別
- TypeScript類(lèi)型系統(tǒng)自定義數(shù)據(jù)類(lèi)型教程示例
- 基于tsup打包TypeScript實(shí)現(xiàn)過(guò)程
相關(guān)文章
js實(shí)現(xiàn)搜索框關(guān)鍵字智能匹配代碼
這篇文章主要為大家分享了js實(shí)現(xiàn)搜索框關(guān)鍵字智能匹配代碼,感興趣的朋友可以參考一下2016-01-01在for循環(huán)中l(wèi)ength值是否需要緩存
這篇文章主要介紹了在for循環(huán)中l(wèi)ength值是否需要緩存,需要的朋友可以參考下2015-07-07js移動(dòng)焦點(diǎn)到最后位置的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇js移動(dòng)焦點(diǎn)到最后位置的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11js實(shí)現(xiàn)輪播圖效果 z-index實(shí)現(xiàn)輪播圖
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)輪播圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01JavaScript知識(shí)點(diǎn)總結(jié)之如何提高性能
JavaScript的性能問(wèn)題不容小覷,這就需要我們開(kāi)發(fā)人員在編寫(xiě)JavaScript程序時(shí)多注意一些細(xì)節(jié),本文非常詳細(xì)的介紹了一下JavaScript性能優(yōu)化方面的知識(shí)點(diǎn),絕對(duì)是干貨,需要的朋友快來(lái)一起學(xué)習(xí)吧2016-01-01淺談js的html元素的父節(jié)點(diǎn),子節(jié)點(diǎn)
下面小編就為大家?guī)?lái)一篇淺談js的html元素的父節(jié)點(diǎn),子節(jié)點(diǎn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08Javascript 數(shù)組添加一個(gè) indexOf 方法的實(shí)現(xiàn)代碼
Javascript 的字符串有個(gè) indexOf 的方法,能夠返回字符在指定的字符串中的位置,非常有用,本文介紹了如何給 Javascript 數(shù)組也添加一個(gè)類(lèi)似的方法。2009-09-09BOM系列第二篇之定時(shí)器requestAnimationFrame
這篇文章主要介紹了BOM系列第二篇之定時(shí)器requestAnimationFrame 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08