提取代码的公共部分,无法打包成功

来源:3-5 由浅入深 webpack - 打包公共代码(1)

刚仔

2018-03-13

webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead

打包后提示上面的信息,现在版本都变了,老师什么时候更新下视频,现在完全对不上,真奔溃

写回答

5回答

qbaty

2018-03-14

嗯,我会尽快的...

1
0

qbaty

2018-05-14

如果你使用的是webpack 4 你可以尝试直接删除 CommonsChunkPlugin ,因为webpack 4的时候默认就会做代码分割,而且这个代码分割不会受entry 的影响

0
0

慕后端5076517

2018-03-30

cacheGroups 是继承 默认的例如 minSize。。。。。如果 需要指定 test, priority and reuseExistingChunk

才必须写cacheGroups 

各位老师和看官帮着看一下,理解的对吗?

0
0

慕后端5076517

2018-03-30

optimization参数介绍:

optimization: {
   splitChunks: {
     chunks: "initial",         // 必须三选一: "initial" | "all"(默认就是all) | "async"
     minSize: 0,                // 最小尺寸,默认0
     minChunks: 1,              // 最小 chunk ,默认1
     maxAsyncRequests: 1,       // 最大异步请求数, 默认1
     maxInitialRequests: 1,    // 最大初始化请求书,默认1
     name: () => {},              // 名称,此选项课接收 function
     cacheGroups: {                 // 这里开始设置缓存的 chunks
       priority: "0",                // 缓存组优先级 false | object |
       vendor: {                   // key 为entry中定义的 入口名称
         chunks: "initial",        // 必须三选一: "initial" | "all" | "async"(默认就是异步)
         test: /react|lodash/,     // 正则规则验证,如果符合就提取 chunk
         name: "vendor",           // 要缓存的 分隔出来的 chunk 名称
         minSize: 0,
         minChunks: 1,
         enforce: true,
         maxAsyncRequests: 1,       // 最大异步请求数, 默认1
         maxInitialRequests: 1,    // 最大初始化请求书,默认1
         reuseExistingChunk: true   // 可设置是否重用该chunk(查看源码没有发现默认值)
       }
     }
   }
 },


0
0

慕后端5076517

2018-03-30

http://www.codedata.cn/hacknews/151994848372127661 

现在使用 splitChunks ,配置 webpack.config.js 如下:

optimization: {

    splitChunks: {

        chunks: "initial",//

        minChunks: 2,//被引用次数大于等于2的时候提取成一个公共的chunks

        minSize:100,

        name: "commons"

    }

},


0
4
慕无忌6890528
回复
qbaty
更新了老师通知一下,可以吗?不然总感觉缺失一部内容。
2018-05-15
共4条回复

四大维度解锁Webpack3.0前端工程化

前端开发标配,灵活掌握Webpack3.0的使用可以极大的提高前端开发的效率

1188 学习 · 403 问题

查看课程