webpack@3.6.0（4） -- 配置模块化开发

本篇内容

• watch
• 版权插件
• hash、chunkhash、contenthash的区别

watch

修改文件时自动打包

webpack --watch

//webpack.config.js，与devServer同级
watchOptions:{
    poll:1000,      //检测修改时间，毫秒为单位
    aggregateTimeout:500,   //ctrl+s的时间间隔最小单位，超出时才打包
    ignored:/node_modules/,            //不监测哪个

}

版权插件

webpack自带的插件

const webpack=require('webpack');
new webpack.BannerPlugin('adoctors版权所有,如有问题请联系qkeliang@163.com')

hash、chunkhash、contenthash的区别

hash一般是结合CDN缓存来使用，通过webpack构建之后，生成对应文件名自动带上对应的MD5值。

如果文件内容改变的话，那么对应文件哈希值也会改变，对应的HTML引用的URL地址也会改变，触发CDN服务器从源服务器上拉取对应数据，进而更新本地缓存。

但是在实际使用的时候，这几种hash计算还是有一定区别。

举个例子：项目结构很简单，入口文件index.js，引用了index.css。然后新建了jquery.js和test.js作为公共库。

hash

hash是跟整个项目的构建相关，只要项目里有文件更改，整个项目构建的hash值都会更改，并且全部文件都共用相同的hash值,即同一次构建过程中生成的哈希都是一样的。

chunkhash

采用hash计算的话，每一次构建后生成的哈希值都不一样，即使文件内容压根没有改变。这样子是没办法实现缓存效果，我们需要换另一种哈希值计算方式，即chunkhash。

chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。

这样子就保证了在线上构建的时候只要文件内容没有更改就不会重复构建。

contenthash

在chunkhash的例子，我们可以看到由于index.css被index.js引用了，所以共用相同的chunkhash值。

但是这样子有个问题，如果index.js更改了代码，css文件就算内容没有任何改变，由于是该模块发生了改变，导致css文件会重复构建。

这个时候，我们可以使用extra-text-webpack-plugin里的contenthash值，保证即使css文件所处的模块里就算其他文件内容改变，只要css文件内容不变，那么不会重复构建。