webpack3插件CommonChunkPlugin分离vantUI和echarts,问题的webpackJsonp is not defined解决!!!

webpack3插件CommonChunkPlugin分离vantUI和echarts和报错webpackJsonp is not defined的解决

前景:因为项目使用的webpack3开发的场景,打包后的vendor很大,如图显示


如果不做gzip处理的话,大小在2M多,gzip后的大小是600KB,但是考虑里面还包括各种公共包,所以对vendor文件再拆分处理;

默认打包的代码如下:

javascript 复制代码
webpack.prod.conf.js 默认配置如下:

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks(module) {
     return module.resource && 
     	/\\.js$/.test(module.resource) &&
     	module.resource.indexOf(path.join(__dirname, '../node\_modules')) ===0
     }
}),
new webpack.optimize.CommonsChunkPlugin({
    name: 'manifest',
    minChunks: Infinity
})
new webpack.optimize.CommonsChunkPlugin({
    name: 'app',
    async: 'vendor-async',
    children: true,
    minChunks: 2
})

修改webpack.prod.conf.js 配置如下:

javascript 复制代码
new HtmlWebpackPlugin({
       filename: config.build.index,
       template: 'index.html',
       inject: true,
       minify: {
           removeComments: true,
           collapseWhitespace: true,
           removeAttributeQuotes: true
        },
      chunks: ['manifest', 'vendor', 'vendor_echarts', 'vendor_vantUI', 'app'], // 更改此行配置,按照依赖关系从左至右书写
      chunksSortMode: 'manual' //更改此行配置,上面的配置无效的原因就是配置了非此值
 })

newwebpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks(module) {
     return module.resource && 
     	/\\.js$/.test(module.resource) &&
     	module.resource.indexOf(path.join(__dirname, '../node\_modules')) ===0
     }
}),
new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor_echarts',
    chunks: ['vendor'],
    minChunks(module) {
        return module.resource && /vant/.test(module.resource)
    }
}) 
new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor_vantUI',
    chunks: ['vendor'],
    minChunks(module) {
        return module.resource && /echarts/.test(module.resource)
    }
})
new webpack.optimize.CommonsChunkPlugin({
    name: 'manifest',
    chunks: ['vendor', 'vendor_echarts', 'vendor_vantUI', 'app'],
    minChunks: Infinity
})
new webpack.optimize.CommonsChunkPlugin({
    name: 'app',
    async: 'vendor-async',
    children: true,
    minChunks: 2
})



注意要和上面配置一样才行,不然后续会报错这个问题 !!!
webpackJsonp is not defined !!!


最终打包后效果如下图:


最后项目运行在生产没问题!!!

非常感谢这个大佬的处理,也是按照他的方案搞定的,感谢!

webpack3插件CommonChunkPlugin分离ElementUI和Echarts

相关推荐
蓝胖子的多啦A梦2 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想5 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
The_cute_cat7 分钟前
JavaScript的初步学习
开发语言·javascript·学习
海天胜景9 分钟前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
今晚打老虎z13 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982419 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴24 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干28 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗30 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
独立开阀者_FwtCoder34 分钟前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github