new webpack.HashedModuleIdsPlugin()这个到底是干啥的(webpack2)?
假如配置文件是这样的:
//入口文件
entry: {
index: './src/js/entry1.js',
about: './src/js/entry2.js',
vendor: ['./src/js/content/a.js']
},
//输出目录
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name]-[chunkhash:6].js',
chunkFilename: 'js/[name]-[chunkhash:6].js',
publicPath: '/dist/'
},
还分离了css并抽离公共js/CSS部分
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
new ExtractTextPlugin('css/[name]-[contenthash:6].css'),
new webpack.HashedModuleIdsPlugin()
]
然后先打包一次,出现了一个dist文件夹
-dist
-css
-index-hash6.css
-about-hash6.css
-vendor-hash6.css
-js
-index-hash6.js
-about-hash6.js
-vendor-hash6.js
现在修改一下entry1.js文件,再打包
发现得到2个新文件:
-index-hash6(被改变).js
-vendor-hash6(被改变).js
发现vendor.js的hash还是跟着引入它的entry1,js文件变化了
再修改css文件,发现引入css文件的js的hash并没有改变,只有被修改的css的hash变化了,这个倒是和webpack1不同了。。但是这个不需要new webpack.HashedModuleIdsPlugin()也能实现。
看打包后的代码,变化就是:
__webpack_require__(0);
__webpack_require__(3);
这些chunkID变成了英文字母
__webpack_require__("jcZh");
__webpack_require__("A0gR");
所以new webpack.HashedModuleIdsPlugin()到底是干啥用的?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
https://sebastianblade.com/us...这篇文章,好像有说到,看看有没有帮助
现在改成这样。。vendor的hash是不会随entry1.js变动了,但是manifest.js又跟着变了。。
虽然manifest并不需要替换了。。但是每次都生成一个新的manifest好多余啊。。