使用webpack打包ts代碼
具體步驟如下：
1.新一個項目文件夾
2.執行npm init -y生成package.json
3.執行npm i -D webpack webpack-cli typescript ts-loader
4.編寫webpack文件，新建一個webpack.config.js
webpack.config.js代碼如下：
//引入一個包
const path = require('path');
//webpack中的所有配置信息都應該寫在module.exports中
module.exports = {
//指定入口文件
entry:"./src/index.ts",
//指定打包文件所在的目錄
output:{
//指定打包文件的目錄
path:path.resolve(__dirname,'dist'),
//打包后文件的文件
filename:"bundle.js"
},
//指定webpack打包時要使用的模塊
module:{
//指定要加載的規則
rules:[
{
//test 指定的是規則生效的文件
test:/\.ts$/,
//要使用的loader
use:'ts-loader',
//要排除的文件
exclude:/node-modeules/
}
]
}
}
5.在根目錄新建一個tsconfig.json配置文件
{
"compilerOptions":{
"module":"ES2015",
"target":"ES2015",
"strict":true
}
}
6.在package.json文件中添加一行
"scripts":{
"build":"webpack"
}
7.執行npm run build打包，出現dist/burdle.js就成功了
以上是最簡單的一個webpack基礎流程。
下面我們來自動生成html文件
8.執行npm i -D html-webpack-plugin插件（下載成功后，package.json就有依賴了）
9.在webpack.config.js文件中導入
//引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
//找到module同級別后面添加配置Webpack插件代碼
plugins:[
new HTMLWebpackPlugin(
//title:"這是一個自定義標題title" （可不寫）
//template:"文件模板路徑" （可不寫）
)
]
10.執行npm run build重新編譯，dist文件夾下面就自動生成html文件了。
11.安裝內置服務器，自動運行更新到瀏覽器中。執行npm i -D webpack-dev-server。在package.json文件中添加一行
"scripts":{
"start":"webpack server --open chrome.exe"
}
12.執行npm i -D clean-webpack-plugin插件。這個插件是用來清理dist文件的。在webpack.config.js文件中導入
//引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//找到module同級別后面添加配置Webpack插件代碼
plugins:[
new CleanWebpackPlugin(),
new HTMLWebpackPlugin(
//title:"這是一個自定義標題title" （可不寫）
template:"文件模板路徑" （可不寫）
),
]
然后在執行 npm run build,你看不出什么效果，其實這個命令執行的時候是先清空dist下面的文件，然后再重新創建的，重新編譯的，這樣做是為了避免有舊文件。
13.最后一個問題：在webpack的默認情況下，webpack是不知道TS可以作為模塊使用的，所以我們需要特意配置一下。在webpack.config.js文件中，找到plugins同層級別后添加：
//用來設置引用模塊
resolve:{
extensions:['.ts','.js'] //就是以.ts和.js為后綴名文件
}
14.兼容性問題（兼容低版本瀏覽器）
babel的作用：
1.可以把新語法轉行成就語法
2.新的技術，在舊的瀏覽器不支持，通過babel就可以讓就瀏覽器支持新技術了。
執行npm i -D @babel/core @babel/preset-env babel-loader core-js。在webpack.config.js中找到module下面的use修改代碼如下：
use：[
//配置babel
{
//指定加載器
loader:"babel-loader",
//設置babel
options:{
//設置預定義的環境
presets:[
[
//指定環境的插件
"@babel/preset-env",
//配置信息
{
//要兼容的目標瀏覽器
targets:{
"chrome":"88",
},
//指定corejs的版本
"corejs":"3",
//使用corejs的方式 "usage":表示按需加載
"useBuiltIns":"usage"
}
]
]
}
},
'ts-loader'
]
//告訴webpack不使用箭頭函數
//在webpack.config.js中，找到output下面添加
environment:{
arrowFunction:false
}
參考資料：
1、https://blog.csdn.net/weixin_43754395/article/details/114066244，這一篇比較詳細具體，邏輯上都能說的通。
2、https://www.jianshu.com/p/2bc50b542969，這一篇不是很詳細，對照着看第一篇用的，參考價值不大。