webpack_提取公共代码_多文件入口打包

webpack配置信息

entry: {
    Home:'./src/index',    //文件入口1
    Footer:'./src/_index' //文件入口2
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',    //打包生成之后的名字
    chunkFileName: '[name].js',  //打包生成之后的名字
    publicPath: './dist/'               //代码生成在和webpack平级的dist目录下
  },
plugins: [
    .......
    new webpack.optimize.CommonsChunkPlugin({
      name:'common',     //提取公共代码文件名
      chunks:['Home','Footer'],  //只提取main节点和index节点,不设置提取所有文件公共部分代码
      minChunks:2   // 最少被多少个文件公共才会被提取
    })
   ......
 ]
引用时应按照entry部分顺序引用js代码

上例中入口文件先有Home后有Footer,因此html引用顺序为

  • common.js
  • Home.js
  • Footer.js
单独使用的时候引用

文件1:

  • common.js
  • Home.js

文件2:

  • common.js
  • Footer.js
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过...
    阳阳阳一堆阳阅读 3,358评论 0 5
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,253评论 7 35
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,728评论 7 110
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,340评论 4 31
  • 爸爸已不再是当年的那个少年郎了,就算他依旧是我的盖世英雄。可是,现在要轮到我来保护他了,同时也要保护他爱的妈妈和我...
    刘小星星阅读 201评论 0 0