官網(wǎng)網(wǎng)址：https://webpack.docschina.org/
減少文件數(shù)量，縮減代碼體積，提高瀏覽器打開速度。
用于分析、并打包代碼。支持所有類型文件的打包，其本質(zhì)是一個第三方模塊包。
配置環(huán)境
- 初始化包環(huán)境
yarn init
- 安裝依賴包
yarn add webpack webpack-cli -D
- 配置package.json 的 scripts（自定義命令）
"scripts": {
"build": "webpack"
}
打包文件
在根目錄下新建 src 文件夾，所有要打包的文件都要放在 src 文件夾下。
在 src 文件夾下，新建 add 文件夾，并在其下面新建要打包的add.js文件。
// src/add/add.js
function add (a, b) {
return a + b;
}
// 導(dǎo)出
module.exports = {
add,
}
在 add 的同級目錄下，新建 sum 文件夾，并在其下面新建要打包的 sum.js 文件。
// src/sum.sum.js
function sum (arr) {
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum += arr[i];
}
return sum;
}
// 導(dǎo)出
module.exports = {
sum,
}
在 src 下新建 index.js 入口文件（默認(rèn)入口文件為 src/index.js）
// src/index.js
// 導(dǎo)入
let add = require('./add/add');
let sum = require('./sum/sum');
// 引用
console.log(add(10, 20)); // 30
打包命令
打包后，會在根目錄生成 dist 目錄，并生成 main.js 出口文件（main.js 就是打包會后的文件）。
yarn build
執(zhí)行流程
所有要被打包的資源都要跟入口產(chǎn)生直接 / 間接的引用關(guān)系。
package.json 配置文件
{
"scripts": {
"build": "webpack", // 自定義打包命令
"server": "webpack server" // webpack開發(fā)服務(wù)器
},
}
啟動服務(wù)后，自動打包文件。不需要每次執(zhí)行 yarn build 重新進(jìn)行打包。
# 安裝依賴包
yarn add webpack-dev-server -D
# 啟動服務(wù)器
yarn serve
webpack.config.js 配置文件
在 src 同級目錄下新建
webpack.config.js配置文件。
配置端口號
devServer: {
port: 3000
}
mode：配置當(dāng)前環(huán)境
- 開發(fā)環(huán)境：development
- 生產(chǎn)環(huán)境：production
entry：入口文件
要打包的文件。
output：出口文件
打包后生成的文件。
plugins：配置插件
- HtmlWebpackPlugin
# 安裝
yarn add html-webpack-plugin -D
// 配置
new HtmlWebpackPlugin({
template: './public/index.html'
})
module：配置 loader
- rules：配置規(guī)則
- 打包 css 文件
css-loader 將css文件一起打包到 js 中
style-loader 將 css 插入到DOM (style標(biāo)簽) 上
- 打包 img 圖片
小于8KB，文件轉(zhuǎn)base64打包在js中。大于8KB，自動命名輸出到dist下。
{
test: /\.(png|jpg|jpeg|gif)$/i,
type: 'asset'
}
- 打包 less 文件
# 安裝依賴包
yarn add less less-loader -D
- 配置文件
對 js 語法進(jìn)行降級處理，兼容低版本。
# 安裝依賴包
yarn add babel-loader @babel/core
module.exports = {
// 配置端口號
devServer: {
port: 3000
}
// 配置開發(fā)環(huán)境還是生產(chǎn)環(huán)境
mode: 'development',
// 自定義入口文件
entry: '/src/main.js',
// 自定義出口文件
output: {
pash: pash.json(_dirname, 'dist');
filename: 'bundle.js'
},
// 配置插件
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
})
],
// 配置 loader
module: {
// 配置規(guī)則
rules: [
// loader 配置 - 打包 css 文件
{
test: /\.css$/i,
// css-loader 將css文件一起打包到j(luò)s中
// style-loader 將css插入到DOM(style標(biāo)簽)上
use: ['style-loader', 'css-loader']
},
// loader 配置 - 打包 img 圖片
{
test: /\.(png|jpg|jpeg|gif)$/i,
type: 'asset'
},
// less 配置 - 打包 less 文件
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"]
},
// 配置 字體圖標(biāo)
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
type: 'asset/resource',
generator: {
filename: 'font/[name].[hash:6][ext]'
}
},
// 對 js 語法降級，適配低版本
{
test: '/\.js$/',
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
}
ES6 模塊化打包
方式一（推薦）
// 入口文件：
export const 變量名 = function () {}
// 出口文件
import {變量名} from '入口文件路徑'
入口文件 add.js（導(dǎo)出）
export const add = function (a, b) {
return a + b;
}
出口文件 index.js（導(dǎo)入）
import {add} from './add/add'
方式二
// 入口文件：
const 變量名 = function () {}
export default 變量名;
// 出口文件
import 變量名 from '入口文件路徑'
入口文件 add.js（導(dǎo)出）文章來源：http://www.zghlxwxcb.cn/news/detail-614944.html
const add = function (a, b) {
return a + b;
}
export default add;
出口文件 index.js（導(dǎo)入）文章來源地址http://www.zghlxwxcb.cn/news/detail-614944.html
import add from './add/add'
到了這里，關(guān)于第三節(jié)：Node.js 之 Webpack 打包的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
