首页 > webpack如何在每次打包后控制版本?

webpack如何在每次打包后控制版本?

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


可以用 assets-webpack-plugin 之类的 webpack 插件,在生成代码时生成一个 json 文件,其中包含了源文件和打包结果的对应关系。开发时让后端代码读取这个 json 文件,获取最新的目标文件名。
发布的时候建议用 gulp-replace 之类的东西或自己写一个 loader 直接替换 jsp 文件中的地址。

PS. 类似的插件有好几个,用下来就这一个没报错 - -||


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>

有个html-webpack-plugin的插件,你可以看看是不是你想要的


可以使用去哪的fekit: 去哪UED
编译后生成一些ver文件,可以被jsp或者php引用。
jsp里这么写:

源码为:
<script src="http://qunarzz.com/hotel_fekit/prd/scripts/base@<%=VERSION_MAP.get("loader.js")%>.js"></script>
上线后变为:
<script src="http://qunarzz.com/hotel_fekit/prd/scripts/base@d7dadc627df2c525fc695a60bcba9f18.js"></script>
【热门文章】
【热门文章】