1、webpack的簡單使用
一般項目中不會直接編譯ts代碼，而是使用打包工具來進行
ts_webpack文件夾
初始化項目：npm init -y（生成package.json）
下載構建工具：npm i -D webpack webpack-cli typescript ts-loader
webpack：構建工具webpack
webpack-cli：webpack的命令行工具
typescript：ts的編譯器
ts-loader：ts加載器，用於在webpack中編譯ts文件
配置webpack：
1、根目錄下創建webpack的配置文件：webpack.config.js
const path = require('path')
module.exports = {
mode: 'none',
entry: './src/index.ts', // 指定入口文件
output: {
path: path.resolve(__dirname, 'dist'), // 指定打包文件的目錄
filename: 'bundle.js' // 打包后文件的名稱
},
// 指定webpack打包時要使用的模塊
module: {
// 指定loader加載的規則
rules: [
{
test: /\.ts$/, // 指定規則生效的文件：以ts結尾的文件
use: 'ts-loader', // 要使用的loader
exclude: /node-modules/ // 要排除的文件
}
]
},
// 設置哪些文件類型可以作為模塊被引用
resolve: {
extensions: ['.ts', '.js']
}
}
2、根目錄下創建tsconfig.json：
{ "compilerOptions": { "module": "ES6", "target": "ES6", "strict": true } }
3、在package.json中加上build命令"build": "webpack"
4、執行npm run build，項目根目錄下會生成dist/bundle.js
2、webpack中常用的插件
1、html-webpack-plugin 打包時自動創建html文件，並自動引入js文件
①安裝插件：cnpm i -D html-webpack-plugin
②引入和使用插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
...
plugins: [new HtmlWebpackPlugin()]
③打包：npm run build
打包后dist中會生成index.html
④html-webpack-plugin插件的配置項
new HtmlWebpackPlugin({ title: '自定義標題', // 自定義title標簽內容 template: './src/template.html' // 以template.html文件作為模板生成dist/index.html（設置了template，title就失效了） })
2、webpack-dev-server 熱更新
①安裝插件：npm i -D webpack-dev-server
②在package.json中加上start命令："start": "webpack serve --open chrome.exe"
③執行npm start，會自動打開谷歌瀏覽器
如果打開的是http://localhost:8081/chrome.exe，手動將/chrome.exe去掉
如果報這個錯：
在webpack.config.js中設置mode屬性，可選值有'production'、'development'、'none'
④此時，在index.ts中編寫的ts代碼會在dist/index.html中實時更新
3、clean-webpack-plugin 在build前清空dist目錄所有文件，避免舊文件的遺留
①安裝插件：npm i -D clean-webpack-plugin
②引入和使用：
const { CleanWebpackPlugin } = require('clean-webpack-plugin') // clean插件
...
new CleanWebpackPlugin()
3、babel的使用
為了使代碼能夠兼容不同的瀏覽器，我們需要使用babel工具（與webpack結合一起使用）
①安裝插件：npm i -D @babel/core @babel/preset-env babel-loader core-js
@babel/core：babel的核心工具
@babel/preset-env：babel的預設環境
babel-loader：babel與webpack結合的工具
core-js：模擬js運行環境，使老版本的瀏覽器支持新版es語法（比如Promise在ie11中不支持，添加corejs配置會引入corejs中封裝的Promise）
②修改webpack配置文件，添加babel配置
{ loader: 'babel-loader', // 指定加載器 // 設置babel options: { // 設置預定義的環境 presets: [ [ '@babel/preset-env', // 指定環境的插件 // 配置信息 { targets: { chrome: 58, ie: 11 }, // 要兼容的目標瀏覽器及版本（ie11不支持es6語法，寫上 ie: 11 打包時就會編譯成支持到ie11） corejs: 3, // 指定corejs的版本（根據package.json中的版本，只寫整數） useBuiltIns: 'usage' // 使用corejs的方式，'usage'表示按需加載 } ] ] } },
③此時，打包后的代碼就支持到Chrome58和ie11了。
注意：ie11不支持es6，如果使用了Promise，則需要引入corejs，它會將自帶的封裝好的Promise打包到最終的bundle.js中，使用corejs時將useBuiltIns設置為'usage'則為按需引入
4、webpack.config.js最終配置文件
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') // webpack中html插件，用來自動創建html文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin') // clean插件
module.exports = {
mode: 'none',
entry: './src/index.ts', // 指定入口文件
output: {
path: path.resolve(__dirname, 'dist'), // 指定打包文件的目錄
filename: 'bundle.js', // 打包后文件的名稱
environment: { arrowFunction: false } // 告訴webpack打包后的【立即執行函數】不使用箭頭函數（新版的webpack不支持ie11，如果需要打包后的代碼支持ie11需要加上該配置）
},
// 指定webpack打包時要使用的模塊
module: {
// 指定loader加載的規則
rules: [
{
test: /\.ts$/, // 指定規則生效的文件：以ts結尾的文件
// use: 'ts-loader', // 要使用的loader
// ts先由ts-loader轉換成js文件，再由babel中target指定的瀏覽器版本，將js轉成對應的語法。配置了babel后不需要考慮使用es5還是es6的版本了，在target中指定了需要兼容的瀏覽器版本，babel會自動幫我們轉
use: [
{
loader: 'babel-loader', // 指定加載器
// 設置babel
options: {
// 設置預定義的環境
presets: [
[
'@babel/preset-env', // 指定環境的插件
// 配置信息
{
targets: { chrome: 58, ie: 11 }, // 要兼容的目標瀏覽器及版本（ie11不支持es6語法，寫上 ie: 11 打包時就會編譯成支持到ie11）
corejs: 3, // 指定corejs的版本（根據package.json中的版本，只寫整數）
useBuiltIns: 'usage' // 使用corejs的方式，'usage'表示按需加載
}
]
]
}
},
'ts-loader'
],
exclude: /node-modules/ // 要排除的文件
}
]
},
// 配置webpack插件
plugins: [
new HtmlWebpackPlugin({
title: '自定義標題', // 自定義title標簽內容
template: './src/template.html' // 以template.html文件作為模板生成dist/index.html（設置了template，title就失效了）
}),
new CleanWebpackPlugin()
],
// 設置哪些文件類型可以作為模塊被引用
resolve: {
extensions: ['.ts', '.js']
}
}
目錄結構：
