webpack搭建腳手架打包TypeScript代碼
創(chuàng)建文件夾
目錄結(jié)構(gòu): dabaots
初始化 npm init -y
生成package.json文件
目錄結(jié)構(gòu):
dabaots
dabaots / package.json
然后在開發(fā)環(huán)境中安裝以下幾個工具
npm i -D
webpack··························(打包代碼的核心工具
webpack-cli·····················(webpack的命令行工具)
typescript ·······················(寫ts所需的核心包)
ts-loader ·························(通過ts-loader可以對webpack和ts進行整合)
html-webpack-plugin … (是自動生成html的一個webpack插件)
webpack-dev-server … (無需刷新更新頁面)
clean-webpack-plugin … ( 每次打包上線之前都會自動清空dist內(nèi)的文件如何重新生成最新的文件)
"@babel/core" “@babel/preset-env” babel-loader core-js(安裝babel轉(zhuǎn)換,你是什么環(huán)境他就會轉(zhuǎn)成什么代碼)
可能會遇到的小問題:這里可能會出現(xiàn)的問題就是你下載的依賴包webpack-dev-server版本如果和谷歌的不適配,建議將插件版本改低一點或者谷歌瀏覽器升級成最新版本否則會出現(xiàn)錯誤Cannot GET /chrome.exe
接下來創(chuàng)建webpack.config.js進行配置
目錄結(jié)構(gòu):
dabaots
dabaots / package.json
dabaots / webpack.config.js
// 引入一個包 const path = require("path") //引入自動生成html的包 const HtmlWebpackPlugin = require("html-webpack-plugin") //引入更新dist文件的插件 const {CleanWebpackPlugin} = require("clean-webpack-plugin") // webpack中的所有的配置信息都應(yīng)該寫入moudle.exports中 module.exports={ // 指定入口文件 entry:"./src/index.ts", // 指定打包文件所在目錄 output:{ // 指定打包文件的目錄 path:path.resolve(__dirname,"dist"), // 指定打包后文件的文件 filename:"bundle.js", //編譯的時候不使用箭頭函數(shù) environment: { arrowFunction: false } }, //webpack打包時要使用到module這個模塊 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" }), //每次打包上線之前都會自動清空dist內(nèi)的文件如何重新生成最新的文件 new CleanWebpackPlugin() ], resolve:{ //解決在ts文件內(nèi)部單獨引入其他ts包時候報錯的問題 extensions:['.ts','.js'] } }
最后在package.json中寫入打包及運行等腳本
在終端npm run build
打包運行即可
打包成功后會自動生成一個dist文件
npm run start
自動打開谷歌瀏覽器且內(nèi)容為熱更新的
到此這篇關(guān)于webpack搭建腳手架打包TypeScript代碼的文章就介紹到這了,更多相關(guān)webpack打包TypeScript代碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在for循環(huán)中l(wèi)ength值是否需要緩存
這篇文章主要介紹了在for循環(huán)中l(wèi)ength值是否需要緩存,需要的朋友可以參考下2015-07-07js實現(xiàn)輪播圖效果 z-index實現(xiàn)輪播圖
這篇文章主要為大家詳細介紹了js實現(xiàn)輪播圖效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-01-01Javascript 數(shù)組添加一個 indexOf 方法的實現(xiàn)代碼
Javascript 的字符串有個 indexOf 的方法,能夠返回字符在指定的字符串中的位置,非常有用,本文介紹了如何給 Javascript 數(shù)組也添加一個類似的方法。2009-09-09BOM系列第二篇之定時器requestAnimationFrame
這篇文章主要介紹了BOM系列第二篇之定時器requestAnimationFrame 的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-08-08