关于滴滴那篇“vue-cli#2.0 webpack 配置分析”文章

滴滴在github开源的DDFE-blog有一遍博文很多错误,我提了一小点。半年过去了。我回看了一下当初自己提的问题,除了得到很多认可外,还有就是博文修改的结果真是令我哭笑不得!


  附上那篇文章链接: https://github.com/DDFE/DDFE-blog/issues/10
  这篇文章的注释解释中英文互杂,另外,我觉得作者写这篇文章的时候并没有好好研究过这些配置,很多都是模棱两可,举例来说webpack.prod.conf.js这段配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// split vendor js into its own file
/* 没有指定输出文件名的文件输出的静态文件名 */
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
/* 没有指定输出文件名的文件输出的静态文件名 */
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
})

CommonsChunkPlugin用于生成在入口点之间共享的公共模块(比如jquery,vue)的块并将它们分成独立的包。而为什么要new两次这个插件,这是一个很经典的bug的解决方案,在webpack的一个issues有过深入的讨论webpack/webpack#1315 .—-为了将项目中的第三方依赖代码抽离出来,官方文档上推荐使用这个插件,当我们在项目里实际使用之后,发现一旦更改了 app.js 内的代码,vendor.js 的 hash 也会改变,那么下次上线时,用户仍然需要重新下载 vendor.js 与 app.js——这样就失去了缓存的意义了。所以第二次new就是解决这个问题的,在vue-cli那个英文原注释也说明了:

1
2
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated

然而作者的解释:

1
2

//没有指定输出文件名的文件输出的静态文件名`

这个注释就有点模棱两可了。

参考资料:

https://webpack/webpack#1315
https://sebastianblade.com/using-webpack-to-achieve-long-term-cache/
https://doc.webpack-china.org/guides/code-splitting-libraries/#manifest-
https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
https://cnodejs.org/topic/58396960c71e606e36aed1db
https://lmk123/blog#47

欧阳森 wechat
如果需要联系我,请扫描上方二维码添加我个人微信号
坚持原创技术分享,您的支持将鼓励我继续创作!