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

Question

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

Answer 1

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>

Answer 2

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

Answer 3

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

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

Answer 4

可以使用去哪的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/[e-mail]"></script>