第使用webpack打包ts代碼的實現(xiàn)目錄使用webpack打包生成package.json安裝cnpm安裝webpack相關(guān)編寫webpack配置文件創(chuàng)建tsconfig.json修改package.json使用webpack打包安裝插件html-webpack-pluginwebpack-dev-serverclear-webpack-pluginbabel模塊問題

使用webpack打包

生成package.json

本質(zhì)上，webpack是一個用于現(xiàn)代JavaScript應(yīng)用程序的靜態(tài)模塊打包工具。在我們的項目中要使用webpack首先應(yīng)該初始化，生成的默認(rèn)的package.json，執(zhí)行npminit-y后會在項目根目錄下生成package.json（其中-y是直接略過所有問答，直接都yes）

安裝cnpm

接下來需要安裝webpack所需依賴，我們可以使用npm或cnpm安裝。這里說點題外話。npm作為包管理器，由于服務(wù)器不在國內(nèi)所以有的時候速度會慢一點，所以我們來安裝淘寶團隊的cnpm，這個就是npm在國內(nèi)的鏡像，執(zhí)行以下命令來安裝cnpm

npminstallcnpm-g--registry=

使用cnpm-v來檢查是否安裝成功

安裝webpack相關(guān)

cnpmi-Dwebpackwebpack-clitypescriptts-loader

i是install的簡寫

-D表示安裝到開發(fā)環(huán)境，也就是安裝并將依賴信息寫在package.json中的devDependencies中，等同于--save-dev

webpack安裝打包工具的核心代碼

webpack-cliwebpack命令行工具

typescriptts的核心包

ts-loader必須安裝這個才能讓ts在webpack中使用

執(zhí)行命令后，查看package.json，多了devDependencies節(jié)點，說明安裝成功啦

編寫webpack配置文件

新建一個webpack.config.js文件到根目錄

//引入一個包

constpath=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打包

命令：npmrunbuild

在webpack.config.js中我們指定了入口文件為index.ts，我們在里邊隨便編寫一些內(nèi)容

index.ts

functionsum(a:number,b:number):number{

returna+b;

console.log(sum(11,22));

在webpack.config.js中我們指定了打包文件的目錄為dist，打包后的文件名是bundle.js，所以執(zhí)行命令npmrunbuild后就使用webpack進行了打包，結(jié)果如下：

到此為止，我們就實現(xiàn)了最簡單的使用webpack打包的功能

安裝插件

html-webpack-plugin

①安裝插件

執(zhí)行cnpmi-Dhtml-webpack-plugin

html-webpack-plugin幫助我們自動生成html文件

②引入插件

webpack.config.js中引入插件

//引入一個包

//引入插件

constHTMLWebpackPlugin=require("html-webpack-plugin")

//webpack中的所有配置都應(yīng)該寫在module.exports中

module.exports={

//配置webpack插件

plugins:[

newHTMLWebpackPlugin(),

③打包

先執(zhí)行npmrunbuild

這樣目錄下就生成了html文件

我們可以自定義標(biāo)題或其他一些內(nèi)容

//配置webpack插件

plugins:[

newHTMLWebpackPlugin({

title:"自定義標(biāo)題"

還可以設(shè)置一個網(wǎng)頁模板，我們可以在src下新建一個index.html做為模板

然后在webpack.config.js中將其設(shè)置為模板

plugins:[

newHTMLWebpackPlugin({

template:"./src/index.html"

再次運行npmrunbuild生成的網(wǎng)頁就是根據(jù)剛才寫好的模板生成的

webpack-dev-server

①、執(zhí)行cnpmi-Dwebpack-dev-server

②、在pages.json中scripts節(jié)點下增加start:webpackserve--open

意思是啟動webpack服務(wù)器，這樣我們剛才生成的html會用默認(rèn)瀏覽器打開

③、運行

直接點擊上邊截圖的運行三角形，或者執(zhí)行npmstart

如果報錯Themodeoptionhasnotbeenset

解決辦法：

在webpack.config.js中根節(jié)點下增加mode:development

（如果還處在上次命令，可以按ctrl+c終止命令）再次執(zhí)行npmstart即可打開默認(rèn)瀏覽器

這個網(wǎng)頁是實時更新的，我們修改index.ts，多輸出一行文字，右側(cè)瀏覽器也會自動輸出

clear-webpack-plugin

這個插件的作用是每次編譯會先清空編譯文件夾下的文件，再生成，這樣就保證了都是最新文件

①、安裝

cnpmi-Dclean-webpack-plugin

②、引入、配置

//引入clean插件

const{CleanWebpackPlugin}=require('clean-webpack-plugin')

//配置webpack插件

plugins:[

newCleanWebpackPlugin(),

babel

babel用來解決兼容性問題

①、安裝

cnpmi-D@babel/core@babel/preset-envbabel-loadercore-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并打印