第一篇
webpack處理帶雜湊值的檔名引入問題
我們給打包的檔案打上hash是為了解決快取更新問題，常見需要打上hash的地方有。
output: {
filename: 'bound.[hash:5].js', path: path.resolve(__dirname, 'dist')
}複製程式碼// 提取CSSnew 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
}
},複製程式碼