react.js - webpack如何在每次打包后控制版本？

问题描述

问 题

我们的后台语言是java，前端这边打包动态生成html（当然不是每次都是动态生成，也有手动修改路劲，不过这样做确实很麻烦），但是控制不了xx.jsp文件内js以及css的版本号。求大神给一个完善的解决方案？

解决方案

2楼是一个方案。 我也分享下我的做法。不用操作jsp的。

架构是前后端分离，因为html是在后台的，所以根本操作不了html，也不应该耦合。
所以引入了一个版本控制文件（记录了其他文件的版本号），html引入这个文件（避免cache，引入的时候加入?v=Math.random()随机数），然后在通过这个文件找到其他文件的版本号。
实际上官方文档有介绍哦（最后面）http://webpack.github.io/docs/long-term-caching.html

通过 assets-webpack-plugin 生成一个记录了版本号的文件

// 部分代码
new AssetsPlugin({
    filename: 'build/webpack.assets.js',
    processOutput: function (assets) {
        return 'window.WEBPACK_ASSETS = ' + JSON.stringify(assets);
    }
})

在html中把入口文件引入即可,（html一般也引入入口文件和公共文件也就行了吧）剩下的模块加载时webpack的分内事了

<script>
    document.write('<script src="build/webpack.assets.js?v=' + Math.random() + '"><\/script>');
</script>
<script>
    document.write('<script src="' + window.WEBPACK_ASSETS['commons'].js + '"><\/script>');
    document.write('<script src="' + window.WEBPACK_ASSETS['index'].js + '"><\/script>');
</script>

这篇关于react.js - webpack如何在每次打包后控制版本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！