webpack 配置 chunkhash 报错

webpack chunkhash

  • 错误
output: {
        filename: '[name].[chunkhash ].js',
        path: path.resolve(__dirname, buildDir)
    }

编译不了

  • 为什么用chunkhash
    使用hash对js和css进行签名时,每一次hash值都不一样,导致无法利用缓存,原因是因为,hash字段是根据每次编译compilation的内容计算所得,也可以理解为项目总体文件的hash值,而不是针对每个具体文件的。而用chunkhash,每一个js的模块对应的值是不同的(根据js里的不同内容进行生成),所以在项目中所有的文件都准备用chunkhash,但是又有了新的问题-img和font等资源中,使用chunkhash会报错
  • 解决:因为chunkhash只适用于js和css,img中是没有这种东西的。分别设置处理filename
output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, buildDir)
    },

plugins:[
//保证不管再添加任何新的本地依赖,对于每次构建,vendor hash 都应该保持一致
        new webpack.HashedModuleIdsPlugin(),
//js
new webpack.optimize.CommonsChunkPlugin({ 
            name: "vendor" ,
            filename:"[name].[chunkhash].js"
        }),
//css
 new ExtractTextPlugin("[name].[chunkhash].css")
]
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,231评论 0 21
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,227评论 7 35
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,483评论 1 32
  • 原文http://www.cnblogs.com/libin-1/p/6596810.html 版本号 vue-c...
    tengrl阅读 3,692评论 0 0
  • 如果你的心中有一团火,你应该让它燃烧得更旺。 2017年周总结14/52 一、#焕心焕新#第四期打卡项目: 红皇后...