第一篇
webpack處理帶雜湊值的檔名引入問題
我們給打包的檔案打上hash是為了解決快取更新問題，常見需要打上hash的地方有。
output: {
filename: 'bound.[hash:5].js',
path: path.resolve(__dirname, 'dist')
}
複製程式碼// 提取CSS
new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : '[name].[hash:5].css', // 設定輸出的檔名
chunkFilename: devMode ? '[id].css': '[id].[hash:5].css'
})
複製程式碼但是打上hash我們怎麼引入是一個問題。
html-webpack-plugin外掛可以把js/css注入到一個模板檔案, 所以不需要再手動更改引用。
npm i -D html-webpack-plugin
複製程式碼更改配置檔案
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
// 打包模板
new HtmlWebpackPlugin({
inject: true,
hash: true,
cache: true,
chunksSortMode: 'none',
title: 'Webapck4-demo', // 可以由外面傳入
filename: 'index.html', // 預設index.html
template: path.resolve(__dirname, 'index.html'),
minify: {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
}
})
],
複製程式碼設定一個模板檔案。
// index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="google" value="notranslate">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
複製程式碼打包後的檔案:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="google" value="notranslate">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title></title>
<link href="main.f37fa.css?f37fab3edd3ae8ecda6a" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="bound.f37fa.js?f37fab3edd3ae8ecda6a"></script>
</body>
</html>
複製程式碼webpack清理打包後的dist目錄
我們會發現每次打包後dist資料夾都會不斷增加檔案, 顯然這個方面我們需要處理, 但是某些情況下我們不需要去清理, 比如坑爹的微信公眾號快取問題。
npm i -D clean-webpack-plugin
複製程式碼修改配置檔案
const CleanWebpackplugin = require('clean-webpack-plugin')
plugins: [
// 清理dist目錄
new CleanWebpackplugin(['dist'])
]
複製程式碼webpack處理圖片以及優化
我們這裡只是為了測試, 在index.html模板檔案新增一個dom去使用圖片。
// index.html
<div class="logo"></div>
// base.scss
.logo {
background: url('../assets/logo.png') no-repeat;
width: 100px;
height: 100px;
background-size: contain;
}
複製程式碼使用file-loader來處理檔案的匯入
npm i -D file-loader
複製程式碼修改配置檔案
rules: [
// 處理檔案
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
{
loader: 'file-loader',
options: {
// 具體配置見外掛官網
limit: 1,
name: '[name]-[hash:5].[ext]',
outputPath: 'img/', // outputPath所設定的路徑，是相對於 webpack 的輸出目錄。
// publicPath 選項則被許多webpack的外掛用於在生產模式下更新內嵌到css、html檔案內的 url , 如CDN地址
},
},
]
},
]
複製程式碼下面繼續對圖片進行優化和壓縮
npm i -D image-webpack-loader
複製程式碼修改配置檔案
// 處理檔案
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
{
loader: 'file-loader',
options: {
// 具體配置見外掛官網
limit: 10000,
name: '[name]-[hash:5].[ext]',
outputPath: 'img/', // outputPath所設定的路徑，是相對於 webpack 的輸出目錄。
// publicPath 選項則被許多webpack的外掛用於在生產模式下更新內嵌到css、html檔案內的 url , 如CDN地址
},
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
}
]
},
複製程式碼壓縮前圖片大小181.46kb.
壓縮後29kb.
webpack把圖片轉為base64以及字型處理
通過把一些小的圖片轉為base65(DataURl)可以減少http請求, 提升訪問效率。
npm i -D url-loader
複製程式碼修改配置檔案
// 處理檔案
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
// 具體配置見外掛官網
limit: 10000,
name: '[name]-[hash:5].[ext]',
outputPath: 'img/', // outputPath所設定的路徑，是相對於 webpack 的輸出目錄。
// publicPath 選項則被許多webpack的外掛用於在生產模式下更新內嵌到css、html檔案內的 url , 如CDN地址
},
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
}
]
},
複製程式碼這裡測試的話我們需要準備一個小的圖片即可，如上述配置所述只要小於10kb就會用base64替代。
字型處理的話配置如下：
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
// 檔案大小小於limit引數，url-loader將會把檔案轉為DataUR
limit: 10000,
name: '[name]-[hash:5].[ext]',
output: 'fonts/',
// publicPath: '', 多用於CDN
}
},
複製程式碼