使用webpack打包ts代碼的實現(xiàn)
使用 webpack 打包
生成 package.json
本質(zhì)上，webpack 是一個用于現(xiàn)代 JavaScript 應(yīng)用程序的 靜態(tài)模塊打包工具。在我們的項目中要使用 webpack 首先應(yīng)該初始化，生成的默認(rèn)的 package.json，執(zhí)行 npm init -y 后會在項目根目錄下生成 package.json（其中 -y 是直接略過所有問答，直接都 yes）
安裝 cnpm
接下來需要安裝 webpack 所需依賴，我們可以使用 npm 或 cnpm 安裝。這里說點題外話。npm 作為包管理器，由于服務(wù)器不在國內(nèi)所以有的時候速度會慢一點，所以我們來安裝淘寶團(tuán)隊的 cnpm，這個就是 npm 在國內(nèi)的鏡像，執(zhí)行以下命令來安裝 cnpm
npm install cnpm -g --registry=https://registry.npm.taobao.org
使用 cnpm -v來檢查是否安裝成功
安裝 webpack 相關(guān)
cnpm i -D webpack webpack-cli typescript ts-loader
i 是 install 的簡寫
-D 表示安裝到開發(fā)環(huán)境，也就是安裝并將依賴信息寫在 package.json 中的 devDependencies中，等同于 --save-dev
webpack 安裝打包工具的核心代碼
webpack-cli webpack 命令行工具
typescript ts的核心包
ts-loader 必須安裝這個才能讓 ts 在 webpack 中使用
執(zhí)行命令后，查看 package.json，多了 devDependencies 節(jié)點，說明安裝成功啦
編寫 webpack 配置文件
新建一個 webpack.config.js 文件到根目錄
//引入一個包
const path = require('path')
//webpack 中的所有配置都應(yīng)該寫在 module.exports 中
module.exports = {
//指定入口文件
entry: "./src/index.ts",
//指定打包文件所在目錄
output: {
//指定打包文件的目錄
path: path.resolve(__dirname, 'dist'),
//打包后文件的名字
filename: "bundle.js"
},
//指定webpack打包時使用的模塊
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)講了，先寫這些：
{
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
"strict": true
}
}
修改 package.json
"build": "webpack"
增加位置如下：
使用webpack打包
命令：npm run build
在 webpack.config.js 中我們指定了入口文件為 index.ts，我們在里邊隨便編寫一些內(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é)果如下：
到此為止，我們就實現(xiàn)了最簡單的使用 webpack 打包的功能
安裝插件
html-webpack-plugin
① 安裝插件
執(zhí)行 cnpm i -D html-webpack-plugin
html-webpack-plugin 幫助我們自動生成 html 文件
② 引入插件
webpack.config.js 中引入插件
//引入一個包
......
//引入插件
const HTMLWebpackPlugin = require("html-webpack-plugin")
//webpack 中的所有配置都應(yīng)該寫在 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è)置一個網(wǎng)頁模板，我們可以在 src 下新建一個 index.html 做為模板
然后在 webpack.config.js 中將其設(shè)置為模板
plugins: [
new HTMLWebpackPlugin({
template: "./src/index.html"
}),
]
再次運行 npm run build 生成的網(wǎng)頁就是根據(jù)剛才寫好的模板生成的
webpack-dev-server
①、執(zhí)行cnpm i -D webpack-dev-server
②、在 pages.json 中 scripts 節(jié)點下增加 "start": "webpack serve --open"
意思是啟動 webpack 服務(wù)器，這樣我們剛才生成的 html 會用默認(rèn)瀏覽器打開
③、運行
直接點擊上邊截圖的運行三角形，或者執(zhí)行 npm start
如果報錯 The mode option has not been set......
解決辦法：
在 webpack.config.js 中根節(jié)點下增加 mode: 'development'
（如果還處在上次命令，可以按 ctrl+c 終止命令）再次執(zhí)行 npm start 即可打開默認(rèn)瀏覽器
這個網(wǎng)頁是實時更新的，我們修改 index.ts ，多輸出一行文字，右側(cè)瀏覽器也會自動輸出
clear-webpack-plugin
這個插件的作用是每次編譯會先清空編譯文件夾下的文件，再生成，這樣就保證了都是最新文件
①、安裝
cnpm i -D clean-webpack-plugin
②、引入、配置
//引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
//配置webpack插件
plugins: [
new CleanWebpackPlugin(),
......
],
babel
babel 用來解決兼容性問題
①、安裝
cnpm i -D @babel/core @babel/preset-env babel-loader core-js
②、配置
修改 webpack.config.js
......
//webpack 中的所有配置都應(yīng)該寫在 module.exports 中
module.exports = {
//指定入口文件
entry: "./src/index.ts",
//指定打包文件所在目錄
output: {
......
//告訴webpack不使用箭頭函數(shù)
environment: {
arrowFunction: false
}
},
//指定webpack打包時使用的模塊
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
模塊問題
新建 m1.ts 暴露一個 hi
index.ts 中引入 m1 并打印 hi
執(zhí)行 npm run build 會報錯：
這時我們需要修改 webpack.config.js 中配置，增加
resolve: {
extensions: ['.ts','.js']
}
Resolve 配置 webpack 如何尋找模塊對應(yīng)的文件，在導(dǎo)入語句沒帶文件后綴時，webpack 會自動帶上后綴去嘗試訪問文件是否存在。resolve.extensions 用于配置在嘗試過程中用到的后綴列表
到此這篇關(guān)于使用webpack打包ts代碼的實現(xiàn)的文章就介紹到這了,更多相關(guān)webpack打包ts內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript 傳統(tǒng)事件模型構(gòu)造的事件監(jiān)聽器實現(xiàn)代碼
最近做東西需要添加大量的事件，而且要對所有事件進(jìn)行比較細(xì)致的控制，于是便試著寫了個事件監(jiān)聽器。2010-05-05
JavaScript判斷數(shù)據(jù)類型有幾種方法及區(qū)別介紹
這篇文章主要介紹了JavaScript判斷數(shù)據(jù)類型有幾種方法及區(qū)別介紹,本文給大家分享多種方法通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
下面小編就為大家?guī)硪黄褂胘s獲取地址欄參數(shù)的方法推薦(超級簡單)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
雖然說在前端很少有機(jī)會接觸到算法，大多都交互性的操作，然而從各大公司面試來看，算法依舊是考察的一方面。下面這篇文章就給大家總結(jié)了在前端JS面試中常見的算法問題，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)超級瑪麗小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
微信小程序setInterval定時函數(shù)新手使用的超詳細(xì)教程
平時開發(fā)中為實現(xiàn)倒計時效果可以使用setInterval即可,下面這篇文章主要給大家介紹了關(guān)于微信小程序setInterval定時函數(shù)新手使用的超詳細(xì)教程,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
IE6/7/8/9中Table/Select的innerHTML不能賦值的解決方法
IE6/7/8/9中Table/Select的innerHTML不能賦值的解決方法，需要的朋友可以參考下。2011-04-04
這篇文章主要介紹了Bootstrap Table的使用小結(jié)，本文介紹的非常詳細(xì)，具有參考借鑒價值，感興趣的朋友一起看看吧2016-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圖片預(yù)覽功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
JS實現(xiàn)登錄頁面記住密碼和enter鍵登錄方法推薦
下面小編就為大家?guī)硪黄狫S實現(xiàn)登錄頁面記住密碼和enter鍵登錄方法推薦。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。2016-05-05