獲取全套webpack 4.x教程，請訪問瓦力博客
小菜之前寫過關(guān)于瀏覽器是如何緩存的nginx 緩存{:target="_blank"},感興趣的小伙伴們可以看看蜈敢。在前面小菜寫的配置都是如何去緩存
//build/output.js
const srcPath = require('./base/path');
const config = require('./base/config');
let output = {
path: srcPath.dist,
filename: '[name].[hash].js',
publicPath: config.publicPath
}
module.exports = output;
如果output.js中這樣寫filename:'[name].[hash].js'凹髓，每次打包都會重新生成js文件(文件名不重名)，上傳到服務(wù)器较幌，用戶在客戶端上刷新都會重新從服務(wù)器上拉取js文件弄兜，這樣就會造成請求資源浪費。
1.演示
安裝loadsh
之前沒有安裝過loadsh庫伙伴需要安裝一下
yarn add loadsh
index.js
import _ from 'loadsh';
let arr = ['hello','world'];
let str = _.join(arr,'--');
console.log(str)
編譯webpack
yarn run prod
修改index.js
import _ from 'loadsh';
+ let arr = ['hello','wali'];
let str = _.join(arr,'--');
console.log(str)
編譯webpack
yarn run prod
從上面兩個截圖可以發(fā)現(xiàn)正压，當我們修改index.js文件的代碼后欣福，重新打包生成main.js和vendors~main后面的hash值變了。因為我們修改index.js文件的代碼焦履，在index.js中引用的第三方庫文件拓劝，loadsh是不需修改的,所以打包后我們希望mian.js的hash值變，而vendors~main的hash值不變嘉裤。
2.配置webpack
為了實現(xiàn)上面的功能郑临，我們需要對webpack配置做一些改變
build/output.js
const dirPath = require('./base/path');
const config = require('./base/config');
let output = {
path:dirPath.dist,
+ filename: config.NODE_ENV == 'development'?'[name].js':'[name].[contenthash].js',
+ chunkFilename: config.NODE_ENV == 'development'?'[name].js':'[name].[contenthash].js',
publicPath: config.publicPath
}
module.exports = output
build/optimization.js
let optimization = {
usedExports: true,
splitChunks: {
chunks: 'all',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
},
+ runtimeChunk:{
+ name: entrypoint => `runtimechunk~${entrypoint.name}`
+ }
}
module.exports = optimization
build/plugins.js
const dirpath = require('./base/path');
const config = require('./base/config');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //清除
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //css樣式提取
let plugins = [
new HtmlWebpackPlugin({
title: '瓦力博客',
template: dirpath.src + '/index.html' //以src/index.html為編譯模板
}),
new MiniCssExtractPlugin({
filename: config.NODE_ENV == 'development'?'[name.css]': `${dirpath.css}/[name].[hash].css`,
chunkFilename: config.NODE_ENV == 'development'?'[id].css': `${dirpath.css}/[id].[hash].css`
}), //css提取
new CleanWebpackPlugin(),
- new webpack.HotModuleReplacementPlugin()
]
+ if('development' == config.NODE_ENV){
+ plugins.push(new webpack.HotModuleReplacementPlugin());
+ }
module.exports = plugins;
index.js
import _ from 'loadsh';
let arr = ['hello','world'];
let str = _.join(arr,'--');
console.log(str)
運行webpack
yarn run prod
修改index.js
import _ from 'loadsh';
+ let arr = ['hello','wali'];
let str = _.join(arr,'--');
console.log(str)
運行webpack
yarn run prod
從上面兩張截圖中可以看出來，當我們修改index.js文件內(nèi)容屑宠。main.js后面的hash值發(fā)生改變厢洞，vendors~main.js后面hash值保持不變。當用戶在瀏覽頁面時典奉，我們修改本地代碼躺翻，打包上傳后，用戶刷新瀏覽器卫玖，瀏覽器只會請求hash改變的js文件公你，而hash值沒變的文件依舊從瀏覽器緩存讀取。
3.總結(jié)
寫本小節(jié)的時候假瞬，小菜遇到了兩個問題陕靠，分享給大家
[contenthash]打包報錯
小菜在調(diào)式時，直接在build/output.js文件中這樣寫
let output = {
path:dirPath.dist,
+ filename: '[name].[contenthash].js',
+ chunkFilename: '[name].[contenthash].js',
publicPath: config.publicPath
}
在運行yarn run prod報錯脱茉，報錯信息
ERROR in chunk runtimechunk~main [entry]
[name].[contenthash].js
Cannot use [chunkhash] or [contenthash] for chunk in '[name].[contenthash].js' (use[hash] instead)
不能使用[chunkhash]或[contenthash]在網(wǎng)上找到資料解決連接{:target="_blank"}剪芥。在用new webpack.HotModuleReplacementPlugin()熱更新插件的時候是不能使用[chunkhash]和[contenthash]，所以小菜build/plugins.js中修改配置芦劣，添加了判斷粗俱，只有在development模式下才在使用new webpack.HotModuleReplacementPlugin(),然后在output.js中添加判斷,問題就解決了
const dirPath = require('./base/path');
const config = require('./base/config');
let output = {
path:dirPath.dist,
+ filename: config.NODE_ENV == 'development'?'[name].js':'[name].[contenthash].js',
+ chunkFilename: config.NODE_ENV == 'development'?'[name].js':'[name].[contenthash].js',
publicPath: config.publicPath
}
module.exports = output
運行yarn run dev命令本地服務(wù)器不來
說起來很搞笑，按道理到上面配置基本都沒問題了虚吟，小菜就運行yarn run dev啟動本地服務(wù)寸认，發(fā)現(xiàn)頁面起不來
這個問題排查了很久，最終發(fā)現(xiàn)小菜在build/base/config.js中將
let _mode = process.argv[process.argv.length - 1];
let env = _mode.replace(/--mode=(.+)/g,"$1");
let config = {
NODE_ENV: env == 'development'?'development':'production', //development 開發(fā) production 線上
- publicPath: env == 'development'?'./':'http://www.waliblog.com',
+ publicPath: env == 'development'?'/':'http://www.waliblog.com',
apiUrl:'http://www.waliblog.com',
port: 9999
}
module.exports = config;
本地服務(wù)路徑./弄錯了串慰，所以服務(wù)起起來但是一直找不到根路徑偏塞，頁面也無法訪問。當時這么寫是因為想在生成index.html查看路徑邦鲫，后面一直沒有改才會碰到這個問題灸叼。這個問題找到后神汹，小菜將webpack-14{:target="_blank"}這節(jié)配置重新寫了一遍，之后又重新跑了一遍古今，所以小伙伴們可能遇不到我這個問題屁魏。
