使用webpack打包ts代碼的實現(xiàn)
使用 webpack 打包
生成 package.json
本質(zhì)上，webpack 是一個用于現(xiàn)代 JavaScript 應(yīng)用程序的 靜態(tài)模塊打包工具。在我們的項目中要使用 webpack 首先應(yīng)該初始化，生成的默認的 package.json，執(zhí)行 npm init -y 后會在項目根目錄下生成 package.json（其中 -y 是直接略過所有問答，直接都 yes）
安裝 cnpm
接下來需要安裝 webpack 所需依賴，我們可以使用 npm 或 cnpm 安裝。這里說點題外話。npm 作為包管理器，由于服務(wù)器不在國內(nèi)所以有的時候速度會慢一點，所以我們來安裝淘寶團隊的 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 進行了打包，結(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 文件
我們可以自定義標題或其他一些內(nèi)容
//配置webpack插件
plugins: [
new HTMLWebpackPlugin({
title: "自定義標題"
}),
]
還可以設(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 會用默認瀏覽器打開
③、運行
直接點擊上邊截圖的運行三角形，或者執(zhí)行 npm start
如果報錯 The mode option has not been set......
解決辦法：
在 webpack.config.js 中根節(jié)點下增加 mode: 'development'
（如果還處在上次命令，可以按 ctrl+c 終止命令）再次執(zhí)行 npm start 即可打開默認瀏覽器
這個網(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',
//配置信息
{
//要兼容的目標瀏覽器
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-RegExp對象只能使用一次問題解決方法
RegExp對象執(zhí)行了一次后就廢掉了,所以每次用RegExp都需要重新new一個，下面有個示例，需要的朋友可以參考下2014-06-06
ES6（ECMAScript2015）的出現(xiàn)，無疑給前端開發(fā)人員帶來了新的驚喜，它包含了一些很棒的新特性，可以更加方便的實現(xiàn)很多復(fù)雜的操作，提高開發(fā)人員的效率。JS社區(qū)的每個人都喜歡新的API、語法以及一些簡單、明了更高效的完成重要任務(wù)的新特性。下面來一起看看吧。2016-11-11
利用IntersectionObserver實現(xiàn)動態(tài)渲染的示例詳解
IntersectionObserver誕生已經(jīng)有幾年了，所以它的兼容性目前已經(jīng)達到可以使用的程度了。本文主要介紹了如何利用IntersectionObserver實現(xiàn)動態(tài)渲染，感興趣的可以了解一下2022-12-12
淺析BootStrap中Modal（模態(tài)框）使用心得
Bootstrap Modals（模態(tài)框）是使用定制的 Jquery 插件創(chuàng)建的。本文給大家分享BootStrap中Modal（模態(tài)框）使用心得，一起看看吧2016-12-12
JavaScript轉(zhuǎn)換與解析JSON方法實例詳解
這篇文章主要介紹了JavaScript轉(zhuǎn)換與解析JSON方法,實例分析了JavaScript解析json的技巧,并附帶分析了jQuery解析與轉(zhuǎn)換json的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了JavaScript 防篡改對象的用法示例，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以參考下2021-04-04
這篇文章主要介紹了js鼠標滑過圖片震動特效的方法,涉及onMouseOver事件及圖片操作的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
Javascript實現(xiàn)貪吃蛇小游戲（含詳細注釋）
這篇文章主要為大家詳細介紹了Javascript實現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章介紹了lodash中pick和omit函數(shù)的用法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
three.js中文文檔學(xué)習(xí)之通過模塊導(dǎo)入
這篇文章主要給大家介紹了關(guān)于three.js中文文檔學(xué)習(xí)之通過模塊導(dǎo)入的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或使用three.js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11