webpack 优化配置梳理

因为新公司的项目打包上线后有客户反馈的bug 发现文件会有历史版本的缓存 需要清除后再次访问才能获取最新版本 看了之前同事写的webpack配置感觉和自己的认知有点出入 特此准备再重新整理从头梳理

optimization:runtimeChunk 打包运行时的模块 

对于webpack 异步加载的模块（require.ensure / ()=>import('')）都是runtime模块 如果设置false 则在运行模块改变时 直接改变app.js的hash 如果设置true|single...则会单独生成runtime 的js 

require.ensure([],()=>{ require() },'chunkName') 第三个参数指定分出的chunk名称 ，需要配合output配置 

{
    output:{
        publicPath:"./", 
        chunkFilename:'js/[name].js'
    }
}

关于chunkhash/contenthash

chunkhash:打包后的hash值会根据入口文件的不用而不一样，当某个入口文件修改后重新打包，会导致本入口文件关联的所有文件的hash值都修改，但是不会影响到其他入口文件的hash值

contenthash:根据文件自身内容生成的hash 文件修改时只会改变自身文件的hash 不会影响其他文件 

关于splitchunk 

chunks:'all'  | 'async' | 'initial' 推荐使用 'all' 当同一个模块被分别两个模块异步引入和同步引入时，设置all只会单独提取一份，然后在不同模块里共用

'async'只会单独拆分动态引入模块

'initial' 同步和异步都会被拆分，但是如果同一个模块被分别同步和异步引入时，也会拆分两个chunk 

reuseExistingChunk表示是否使用已有的 chunk，如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了，那么将不会重新生成新的

但是上述分包会直接被 MinChunkSizePlugin 影响 该插件直接将限制大小的文件打包到一个chunk 具体配置如下：

{
    plugins:[
      /*将小于限制大小的全部打包一起*/ 
      new webpack.optimize.MinChunkSizePlugin({
           minChunkSize: 500000 // Minimum number of characters500K
       })
    ]
}

关于libraryTarget和library

libraryTarget:commonjs|commonjs2 

当值为commonjs 如果不加library 则所有属性挂在exports上 如果加library:name ,则挂在exports['name']上

当值为commonjs2 library无影响 直接编译成module.exports