五、處理圖片
file-loader
- 通過(guò)src使用圖片, 有三種方式
// ===========================1===========================
// image.js
// webpack 5以后require返回的是一個(gè)對(duì)象
img.src = require('../img/1-icon.png').default
// webpack.config.js
{
test:/\.(png|svg|gif|jpe?g)$/,
use: [ 'file-loader' ]
}
// ===========================2===========================
// image.js
img.src = require('../img/1-icon.png')
// webpack.config.js
{
test:/\.(png|svg|gif|jpe?g)$/,
use: [
{
loader: 'file-loader',
options: {
// 導(dǎo)出的內(nèi)容是否轉(zhuǎn)化為esMoudle
esModule: false
}
}
]
}
// ===========================3===========================
// image.js
import imgSrc from '../img/1-icon.png'
img.src = imgSrc
// webpack.config.js
{
test:/\.(png|svg|gif|jpe?g)$/,
use: [ 'file-loader' ]
}
- 通過(guò)url使用圖片峰弹，
注意要關(guān)閉 css-loader轉(zhuǎn)為esModule的功能假哎。
// bgImg.css
.bgImg {
background-image: url('../img/2-message.jpg');
}
// image.js
bgImg.className = 'bgImg'
// css-loader 看到url，或轉(zhuǎn)成require處理
{
test: /\.less$/,
use: ['style-loader', {
loader: 'css-loader',
options: {
// 代表向前找一個(gè)loader處理
importLoaders: 1,
esModule: false
}
}, 'postcss-loader', 'less-loader']
}
- 設(shè)置文件名稱輸出
{
test:/\.(png|svg|gif|jpe?g)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'img/[name].[hash:6].[ext]',
// outputPath: 'img'
}
}
]
}
常見(jiàn)屬性配置：
[ext]:擴(kuò)展名
[name]:文件名
[hash]:文件內(nèi)容md4
[contentHash]:文件hash虱疏， 和hash一樣
[hash:<length>]:限定長(zhǎng)度的hash
[path]:路徑
url-loader
yarn add url-loader --dev
url-loader 和 file-loader類似妆兑，只是url-loader默認(rèn)使用base64加載圖片魂拦。
優(yōu)點(diǎn)可以減少一次請(qǐng)求的次數(shù)， 但是文件大的時(shí)候搁嗓，一次性請(qǐng)求就會(huì)很慢芯勘。
不過(guò)url-loader可以通過(guò)limit來(lái)控制加載方式。
{
test:/\.(png|svg|gif|jpe?g)$/,
use: [
{
loader: 'url-loader',
options: {
name: 'img/[name].[hash:6].[ext]',
// 可以限制小于這個(gè)大小的才使用base64
limit: 20 * 1024
}
}
]
}
asset module
- 處理圖片
a. asset/resource （類似file-loader）
{
test:/\.(png|svg|gif|jpe?g)$/,
type: 'asset/resource'
}
// 1.圖片字體都放在一個(gè)地方谱姓，不建議
// assetModuleFilename: 'img/[name].[hash:4][ext]'
// 2.單獨(dú)配置
{
test:/\.(png|svg|gif|jpe?g)$/,
type: 'asset/resource',
generator: {
filename: 'img/[name].[hash:4][ext]'
}
}
b. asset/inline （類似url-loader）
// 全部轉(zhuǎn)成base64
// {
// test:/\.(png|svg|gif|jpe?g)$/,
// type: 'asset/inline'
// }
// 根據(jù)條件轉(zhuǎn)成base64
{
test:/\.(png|svg|gif|jpe?g)$/,
type: 'asset',
generator: {
filename: 'img/[name].[hash:4][ext]'
},
parser: {
dataUrlCondition: {
maxSize: 20 * 1024
}
}
}
c. asset/source （raw-loader 不常用）
- 處理圖標(biāo)字體
// font.js
const oSpan = document.createElement('span')
oSpan.className = 'iconfont icon-linggan lg-icon'
oEle.appendChild(oSpan)
// webpack.config.js
{
test: /\.(ttf|woff2?)$/,
type: 'asset/resource',
generator: {
filename: 'font/[name].[hash:4][ext]'
}
}
六借尿、插件使用
- loader: 負(fù)責(zé)轉(zhuǎn)換 特定類型 。
- plugin: 可以做更多事情屉来，每個(gè)插件都是一個(gè)類路翻。
plugin是通過(guò)鉤子機(jī)制實(shí)現(xiàn)， 鉤子必須是一個(gè)函數(shù)或者一個(gè)包含apply方法的對(duì)象茄靠。
- clean-webpack-plugin 清除目標(biāo)目錄
yarn add clean-webpack-plugin --dev
// webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins: [
new CleanWebpackPlugin()
]
- html-webpack-plugin 生成默認(rèn)html
yarn add html-webpack-plugin --dev
默認(rèn)有個(gè)ejs模板茂契，我們也可以自定義模板，新建public/index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new CleanWebpackPlugin(),
// 可以定義多個(gè)HtmlWebpackPlugin插件用于生成多個(gè)html文件
new HtmlWebpackPlugin({
title: 'jerry-webpack-plugin',
template: './public/index.html'
})
]
- DefinePlugin定義常量（ webpack自帶）
const { DefinePlugin } = require('webpack')
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'jerry-webpack-plugin',
template: './public/index.html'
}),
new DefinePlugin({
// 定義常量
new DefinePlugin({
// 這里要添加雙引號(hào)慨绳，DefinePlugin會(huì)把數(shù)據(jù)原封不動(dòng)返回
BASE_URL: '"./"'
})
]
- copy-webpack-plugin拷貝資源
有些資源只需要拷貝掉冶，不需要打包。
yarn add copy-webpack-plugin --dev
const CopyWebpackPlugin = require('copy-webpack-plugin')
new CopyWebpackPlugin({
patterns: [
{
// 省略了to脐雪，to默認(rèn)output.path的文件夾
from: 'public',
globOptions: {
// index.html上面已經(jīng)操作過(guò)了厌小，需要排除。
// 默認(rèn)從項(xiàng)目根找战秋， **代表從當(dāng)前目錄找
ignore: ['**/index.html']
}
}
]
})
七璧亚、babel
- babel負(fù)責(zé)處理JS兼容，比如JSX脂信、TS癣蟋、ES6+。
和postcss 很像狰闪， 不過(guò)postcss主要處理是css兼容疯搅。
命令行使用
yarn add @babel/core @babel/cli @babel/preset-env --dev
@babel/core：核心模塊
@babel/cli：命令行使用babel
@babel/preset-env：預(yù)設(shè)
npm babel src --out-dir build --presets=@babel/preset-envbabel-loader, 同樣依據(jù).browserslistrc里面配置
yarn add babel-loader --dev
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
// presets: [
// [
// '@babel/preset-env',
// // 這里的配置為準(zhǔn)
// {targets: 'chrome 91'}
// ]
// ],
}
}
]
}
- 使用配置文件
使用 babel.config.js(json cjs mjs)， 一般就是.js后綴埋泵。
babel 7之前使用babelrc.json(js)類似配置文件
// webpack.config.js
{
test: /\.js$/,
use: [ 'babel-loader' ]
}
// babel.config.js
module.exports = {
presets: ['@babel/preset-env']
}
八幔欧、polyfill
- webpack 4自動(dòng)包含polyfill，打包產(chǎn)出比較大， webpack 5 就移出去了琐馆。
preset-env對(duì)于新語(yǔ)法不能全部轉(zhuǎn)換规阀，所以需要polyfill來(lái)打補(bǔ)丁恒序。
yarn add core-js regenerator-runtime
babel-polyfill進(jìn)行了拆分瘦麸，不建議直接使用了，
// babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env',
{
// false: 不對(duì)當(dāng)前的JS處理做 polyfill 的填充
// usage: 依據(jù)用戶源代碼當(dāng)中所使用到的新語(yǔ)法進(jìn)行填充
// entry: 依據(jù)我們當(dāng)前篩選出來(lái)的瀏覽器決定填充什么
// 使用entry歧胁，需要在使用的地方導(dǎo)入頭文件
// import "core-js/stable";
// import "regenerator-runtime/runtime"
useBuiltIns: 'usage',
// 默認(rèn)版本2
corejs: 3
}
]
]
}
// webpack.config.js
{
test: /\.js$/,
// 防止node_modules中的庫(kù)也使用了babel滋饲，導(dǎo)致干擾
exclude: /node_modules/,
use: [ 'babel-loader' ]
}
