一、初始化
終端輸入 (npm,cnpm,yarn等等隨意)
npm init -y
這一步會在根目錄生成package.json文件
二逛裤、下載依賴，這一步會在根目錄生成文件夾node_modules
npm i -D webpack webpack-cli typescript ts-loader
三奴曙、在根目錄新建webpack.config.js别凹，tsconfig.json，文件夾src洽糟，src下新建index.ts
webpack.config.js
const path = require('path')
// webpack中所有的配置信息都應(yīng)該寫在module.exports中
module.exports = {
// 指定入口文件
entry: '',
// 指定打包文件的目錄
output: {
// 指定打包文件的目錄
path: path.resolve(__dirname, 'dist'),
// 打包后的文件
filename: 'bundle.js'
},
// 指定webpack打包時(shí)要使用的模塊
module: {
// 指定要加載的規(guī)則
rules: [
{
// test指定規(guī)則生效的文件
test: /\.ts$/,
// 要使用的loader
use: 'ts-loader',
// 要排除的我呢見
exclude: /node_modeules/
}
]
}
}
tsconfig.json
{
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
"strict": true
}
}
4炉菲、package.json的“scripts”配置打包命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
5、執(zhí)行命令npm run build
這時(shí)就會生成一個(gè)dist文件夾坤溃，文件夾里有文件bundle.js
6拍霜、在index.ts文件寫typeScript代碼
基本的打包就可以完成了
接下來記錄一下其他的webpack插件及配置
1、html-webpack-plugin 生成 html 文件薪介。
將 webpack 中entry配置的相關(guān)入口 chunk 和 extract-text-webpack-plugin抽取的 css 樣式 插入到該插件提供的template或者templateContent配置項(xiàng)指定的內(nèi)容基礎(chǔ)上生成一個(gè) html 文件祠饺，具體插入方式是將樣式link插入到head元素中，script插入到head或者body中汁政。
2道偷、clean-webpack-plugin 打包前清空dist文件
babel配置
@babel/core
@babel/core是babel的核心庫，所有的核心Api都在這個(gè)庫里记劈，這些Api供babel-loader調(diào)用
@babel/preset-env
這是一個(gè)預(yù)設(shè)的插件集合勺鸦，包含了一組相關(guān)的插件，Bable中是通過各種插件來指導(dǎo)如何進(jìn)行代碼轉(zhuǎn)換目木。該插件包含所有es6轉(zhuǎn)化為es5的翻譯規(guī)則
@babel/polyfill
@babel/preset-env只是提供了語法轉(zhuǎn)換的規(guī)則换途，但是它并不能彌補(bǔ)瀏覽器缺失的一些新的功能，如一些內(nèi)置的方法和對象，如Promise,Array.from等军拟，此時(shí)就需要polyfill來做js得墊片剃执，彌補(bǔ)低版本瀏覽器缺失的這些新功能。
babel-loader
以上@babel/core懈息、@babel/preset-env 肾档、@babel/polyfill其實(shí)都是在做es6的語法轉(zhuǎn)換和彌補(bǔ)缺失的功能，但是當(dāng)我們在使用webpack打包js時(shí)辫继，webpack并不知道應(yīng)該怎么去調(diào)用這些規(guī)則去編譯js阁最。這時(shí)就需要babel-loader了，它作為一個(gè)中間橋梁骇两，通過調(diào)用babel/core中的api來告訴webpack要如何處理js
core-js
IE瀏覽器無法兼容es6語法，我們可以使用core-js進(jìn)行兼容性處理姜盈，從而使IE瀏覽器也能夠正常的解析es6語法
npm install -D html-webpack-plugin clean-webpack-plugin
npm install -D @babel/core @babel/preset-env babel-loader core-js
配置
const path = require('path')
// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// webpack中所有的配置信息都應(yīng)該寫在module.exports中
module.exports = {
// 指定入口文件
entry: './src/index.ts',
// 指定打包文件的目錄
output: {
// 指定打包文件的目錄
path: path.resolve(__dirname, 'dist'),
// 打包后的文件
filename: 'bundle.js',
// 告訴webpack不使用箭頭函數(shù)(兼容ie必須不使用箭頭函數(shù))
environment: {
arrowFunction: false
}
},
// 指定webpack打包時(shí)要使用的模塊
module: {
// 指定要加載的規(guī)則
rules: [
{
// test指定規(guī)則生效的文件
test: /\.ts$/,
// 要使用的loader
use: [
{
// 指定加載器
loader: "babel-loader",
// 設(shè)置babel
options: {
// 設(shè)置預(yù)定義的環(huán)境
presets: [
[
// 指定環(huán)境插件
"@babel/preset-env",
// 配置信息
{
// 要兼容的目標(biāo)瀏覽器
targets: {
"chrome": "88",
"ie": "11"
},
// 指定corejs版本
"corejs": "3",
// 使用corejs的方式 usage表示按需加載
"useBuiltIns": "usage"
}
]
]
}
},
'ts-loader'
],
// 要排除的我呢見
exclude: /node_modeules/
}
]
},
// 配置webpack插件
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
// title: "這是一個(gè)自定義的title"
template: "./src/index.html"
})
],
mode: 'development',
resolve: {
extensions: ['.ts', '.js']
}
}
