使用webpack打包ts代碼的實(shí)現(xiàn)
使用 webpack 打包
生成 package.json
本質(zhì)上,webpack 是一個(gè)用于現(xiàn)代 JavaScript 應(yīng)用程序的 靜態(tài)模塊打包工具。在我們的項(xiàng)目中要使用 webpack 首先應(yīng)該初始化,生成的默認(rèn)的 package.json,執(zhí)行 npm init -y
后會(huì)在項(xiàng)目根目錄下生成 package.json(其中 -y
是直接略過(guò)所有問(wèn)答,直接都 yes)
安裝 cnpm
接下來(lái)需要安裝 webpack 所需依賴(lài),我們可以使用 npm 或 cnpm 安裝。這里說(shuō)點(diǎn)題外話。npm 作為包管理器,由于服務(wù)器不在國(guó)內(nèi)所以有的時(shí)候速度會(huì)慢一點(diǎn),所以我們來(lái)安裝淘寶團(tuán)隊(duì)的 cnpm,這個(gè)就是 npm 在國(guó)內(nèi)的鏡像,執(zhí)行以下命令來(lái)安裝 cnpm
npm install cnpm -g --registry=https://registry.npm.taobao.org
使用 cnpm -v
來(lái)檢查是否安裝成功
安裝 webpack 相關(guān)
cnpm i -D webpack webpack-cli typescript ts-loader
i 是 install 的簡(jiǎn)寫(xiě)
-D 表示安裝到開(kāi)發(fā)環(huán)境,也就是安裝并將依賴(lài)信息寫(xiě)在 package.json 中的 devDependencies中,等同于 --save-dev
webpack 安裝打包工具的核心代碼
webpack-cli webpack 命令行工具
typescript ts的核心包
ts-loader 必須安裝這個(gè)才能讓 ts 在 webpack 中使用
執(zhí)行命令后,查看 package.json,多了 devDependencies 節(jié)點(diǎn),說(shuō)明安裝成功啦
編寫(xiě) webpack 配置文件
新建一個(gè) webpack.config.js 文件到根目錄
//引入一個(gè)包 const path = require('path') //webpack 中的所有配置都應(yīng)該寫(xiě)在 module.exports 中 module.exports = { //指定入口文件 entry: "./src/index.ts", //指定打包文件所在目錄 output: { //指定打包文件的目錄 path: path.resolve(__dirname, 'dist'), //打包后文件的名字 filename: "bundle.js" }, //指定webpack打包時(shí)使用的模塊 module: { //指定要加載的規(guī)則 rules: [ { //test 指定規(guī)則生效的文件,以下匹配以 ts 結(jié)尾的文件 test:/\.ts$/, //要使用的loader,用 ts-loader 處理以 ts 結(jié)尾的文件 use: 'ts-loader', //要排除的文件 exclude: /node_modules/ } ] } };
創(chuàng)建 tsconfig.json
上節(jié)我們已經(jīng)講了,先寫(xiě)這些:
{ "compilerOptions": { "module": "ES2015", "target": "ES2015", "strict": true } }
修改 package.json
"build": "webpack"
增加位置如下:
使用webpack打包
命令:npm run build
在 webpack.config.js 中我們指定了入口文件為 index.ts,我們?cè)诶镞呺S便編寫(xiě)一些內(nèi)容
index.ts
function sum(a:number,b:number):number{ return a+b; } console.log(sum(11,22));
在 webpack.config.js 中我們指定了打包文件的目錄為 dist,打包后的文件名是 bundle.js,所以執(zhí)行命令npm run build
后就使用 webpack 進(jìn)行了打包,結(jié)果如下:
到此為止,我們就實(shí)現(xiàn)了最簡(jiǎn)單的使用 webpack 打包的功能
安裝插件
html-webpack-plugin
① 安裝插件
執(zhí)行 cnpm i -D html-webpack-plugin
html-webpack-plugin 幫助我們自動(dòng)生成 html 文件
② 引入插件
webpack.config.js 中引入插件
//引入一個(gè)包 ...... //引入插件 const HTMLWebpackPlugin = require("html-webpack-plugin") //webpack 中的所有配置都應(yīng)該寫(xiě)在 module.exports 中 module.exports = { ...... //配置webpack插件 plugins: [ new HTMLWebpackPlugin(), ] };
③打包
先執(zhí)行 npm run build
這樣目錄下就生成了 html 文件
我們可以自定義標(biāo)題或其他一些內(nèi)容
//配置webpack插件 plugins: [ new HTMLWebpackPlugin({ title: "自定義標(biāo)題" }), ]
還可以設(shè)置一個(gè)網(wǎng)頁(yè)模板,我們可以在 src 下新建一個(gè) index.html 做為模板
然后在 webpack.config.js 中將其設(shè)置為模板
plugins: [ new HTMLWebpackPlugin({ template: "./src/index.html" }), ]
再次運(yùn)行 npm run build
生成的網(wǎng)頁(yè)就是根據(jù)剛才寫(xiě)好的模板生成的
webpack-dev-server
①、執(zhí)行cnpm i -D webpack-dev-server
②、在 pages.json 中 scripts 節(jié)點(diǎn)下增加 "start": "webpack serve --open"
意思是啟動(dòng) webpack 服務(wù)器,這樣我們剛才生成的 html 會(huì)用默認(rèn)瀏覽器打開(kāi)
③、運(yùn)行
直接點(diǎn)擊上邊截圖的運(yùn)行三角形,或者執(zhí)行 npm start
如果報(bào)錯(cuò) The mode option has not been set......
解決辦法:
在 webpack.config.js 中根節(jié)點(diǎn)下增加 mode: 'development'
(如果還處在上次命令,可以按 ctrl+c 終止命令)再次執(zhí)行 npm start
即可打開(kāi)默認(rèn)瀏覽器
這個(gè)網(wǎng)頁(yè)是實(shí)時(shí)更新的,我們修改 index.ts ,多輸出一行文字,右側(cè)瀏覽器也會(huì)自動(dòng)輸出
clear-webpack-plugin
這個(gè)插件的作用是每次編譯會(huì)先清空編譯文件夾下的文件,再生成,這樣就保證了都是最新文件
①、安裝
cnpm i -D clean-webpack-plugin
②、引入、配置
//引入clean插件 const { CleanWebpackPlugin } = require('clean-webpack-plugin') //配置webpack插件 plugins: [ new CleanWebpackPlugin(), ...... ],
babel
babel 用來(lái)解決兼容性問(wèn)題
①、安裝
cnpm i -D @babel/core @babel/preset-env babel-loader core-js
②、配置
修改 webpack.config.js
...... //webpack 中的所有配置都應(yīng)該寫(xiě)在 module.exports 中 module.exports = { //指定入口文件 entry: "./src/index.ts", //指定打包文件所在目錄 output: { ...... //告訴webpack不使用箭頭函數(shù) environment: { arrowFunction: false } }, //指定webpack打包時(shí)使用的模塊 module: { //指定要加載的規(guī)則 rules: [ { //test 指定規(guī)則生效的文件,以下匹配以 ts 結(jié)尾的文件 test:/\.ts$/, //要使用的loader,用 ts-loader 處理以 ts 結(jié)尾的文件 use: [ //配置babel { //指定加載器 loader:'babel-loader', //設(shè)置 babel options: { //設(shè)置預(yù)定義的環(huán)境 presets:[ //指定環(huán)境插件 '@babel/preset-env', //配置信息 { //要兼容的目標(biāo)瀏覽器 targets:{ "chrome":88 }, //指定corejs版本 "corejs":"3", //使用corejs的方式 usage表示按需加載 "useBuiltIns":"usage", } ] } }, 'ts-loader' ], //要排除的文件 exclude: /node_modules/ } ] }, ...... };
加載器的順序是從后往前執(zhí)行,所以先用 ts-loader 將 ts 轉(zhuǎn)為 js,然后使用 babel-loader 將新版本的 js 轉(zhuǎn)換為 舊版本的 js
模塊問(wèn)題
新建 m1.ts 暴露一個(gè) hi
index.ts 中引入 m1 并打印 hi
執(zhí)行 npm run build
會(huì)報(bào)錯(cuò):
這時(shí)我們需要修改 webpack.config.js 中配置,增加
resolve: { extensions: ['.ts','.js'] }
Resolve 配置 webpack 如何尋找模塊對(duì)應(yīng)的文件,在導(dǎo)入語(yǔ)句沒(méi)帶文件后綴時(shí),webpack 會(huì)自動(dòng)帶上后綴去嘗試訪問(wèn)文件是否存在。resolve.extensions 用于配置在嘗試過(guò)程中用到的后綴列表
到此這篇關(guān)于使用webpack打包ts代碼的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)webpack打包ts內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript-RegExp對(duì)象只能使用一次問(wèn)題解決方法
RegExp對(duì)象執(zhí)行了一次后就廢掉了,所以每次用RegExp都需要重新new一個(gè),下面有個(gè)示例,需要的朋友可以參考下2014-06-06利用IntersectionObserver實(shí)現(xiàn)動(dòng)態(tài)渲染的示例詳解
IntersectionObserver誕生已經(jīng)有幾年了,所以它的兼容性目前已經(jīng)達(dá)到可以使用的程度了。本文主要介紹了如何利用IntersectionObserver實(shí)現(xiàn)動(dòng)態(tài)渲染,感興趣的可以了解一下2022-12-12淺析BootStrap中Modal(模態(tài)框)使用心得
Bootstrap Modals(模態(tài)框)是使用定制的 Jquery 插件創(chuàng)建的。本文給大家分享BootStrap中Modal(模態(tài)框)使用心得,一起看看吧2016-12-12JavaScript轉(zhuǎn)換與解析JSON方法實(shí)例詳解
這篇文章主要介紹了JavaScript轉(zhuǎn)換與解析JSON方法,實(shí)例分析了JavaScript解析json的技巧,并附帶分析了jQuery解析與轉(zhuǎn)換json的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11js鼠標(biāo)滑過(guò)圖片震動(dòng)特效的方法
這篇文章主要介紹了js鼠標(biāo)滑過(guò)圖片震動(dòng)特效的方法,涉及onMouseOver事件及圖片操作的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02

three.js中文文檔學(xué)習(xí)之通過(guò)模塊導(dǎo)入