问题:前端脚本重新编译后,静态资源由于浏览器缓存而无法重新加载,出现 'Loading chunk " + xx + " failed'情况。
解决方法:
step1 : 在index.js中引入版本变量
// 生产模式
module.exports = {
build: {
...
//引入版本变量
env: {
VERSION: new Date().getTime() + ''
}
}
step2 : 引入 diy-plugin.js 自定义插件脚本,生成版本信息
'use strict';
var FStream = require('fs');
var Archiver = require('archiver'); //npm install archiver
/**
* 版本信息生成插件
* @param options
* @constructor
*/
function DiyPlugin(options) {
this.options = options || {};
this.options.outZipFile = this.options.path + '/front.zip';
!this.options.versionDirectory && (this.options.versionDirectory = 'static');
}
//apply方法是必须要有的,因为当我们使用一个插件时(new somePlugins({})),webpack会去寻找插件的apply方法并执行
DiyPlugin.prototype.apply = function (compiler) {
var self = this;
compiler.plugin("compile", function (params) {
var dir_path = this.options.context + '/' + self.options.versionDirectory;
var version_file = dir_path + '/version.json';
var content = '{"version":' + self.options.env.VERSION + '}';
FStream.exists(dir_path, function (exist) {
if (exist) {
writeVersion(self, version_file, content);
return;
}
FStream.mkdir(dir_path, function (err) {
if (err) throw err;
console.log('\n创建目录[' + dir_path + ']成功');
writeVersion(self, version_file, content);
});
});
});
//编译器'对'所有任务已经完成'这个事件的监听
// compiler.plugin("done", function (stats) {
// console.log("开始打包压缩编译文件...");
// var output = FStream.createWriteStream(self.options.outZipFile);
// var archiveZip = Archiver('zip', {zlib: {level: 9}});
// archiveZip.on('error', function (err) {
// throw err;
// });
// archiveZip.pipe(output);
// archiveZip.directory(self.options.path + '/' + self.options.versionDirectory, self.options.versionDirectory);
// archiveZip.file(self.options.path + '/index.html', {name: 'index.html'});
// //archive.glob(self.options.path + '/*.*');
// archiveZip.finalize();
// });
};
const writeVersion = (self, versionFile, content) => {
console.log("\n当前版本号:" + self.options.env.VERSION);
console.log("开始写入版本信息...");
//写入文件
FStream.writeFile(versionFile, content, function (err) {
if (err) throw err;
console.log("版本信息写入成功!");
});
//删除之前的压缩包
// FStream.exists(self.options.outZipFile, function (exists) {
// if (exists) {
// FStream.unlinkSync(self.options.outZipFile);
// }
// });
}
module.exports = DiyPlugin;
step3: 在webpack配置文件中添加 diy-plugin.js 编译钩子
const diyPlugin = require('./diy-plugin.js');
var env = config.local.env;
...
plugins: [
...
new diyPlugin({path: config.output.path, env: env, versionDirectory: 'dist'}),
new webpack.DefinePlugin({
'process.env': env
})
]
网友评论