具体情况,具体分析
下面是经典场景

一个页面一个JS

源码结构

webpack 配置

module.exports={
  entry:{
      pageA:'./src/pageA/index.js',
    pageB:'./src/pageB/index.js',
    pageC:['./src/pageC/mian1.js','./src/pageC/mian2.js']
  }
    output{
  filename:'[name].[chunname].js'
 }
}

这种方式适用于页面之间功能差异巨大,公共代码量少的情况,这种情况下打包出来的最终代码不会有太多重复

公共代码量太多的话,导致传输成本增加

一个页面多个JS

源码

webpack 配置

module.exports={
  entry:{
      pageA:'./src/pageA/index.js',
    pageB:'./src/pageB/index.js',
    statistics:'./src/statistics/index.js'
  }
    output{
  filename:'[name].[chunname].js'
    }
}

这中方式适用于页面之间有一些独立的,相同的功能,专门有一个chunk抽离这部分js有利于浏览器缓存这部分内容

为什么不使用多启动模块方式?

• 可以使用多模式
• 只是会增加传输成本

单页应用

所谓单页应用,是指整个网站(或者网站的某一个功能)只有一个页面 ,页面中的内容全靠js创建和控制.vue和react都是单页应用的利器

源码结构

webpack配置

module.exports={
  entry:{
      pageA:'./src/index.js',
  }
    output{
  filename:'index.[hash:5].js'
    }
}