webpack--概念2--入口起点

单个入口的写法

const config={
    entry:{
        main:'./path/to/my/entry/file.js'
    }
}

多页面程序

const config={
    entry:{
        pageOne:'./src/pageOne/index.js',
        pageTwo:'./src/pageTwo/index.js',
        pageThree:'./src/pageThree/index.js',
    }
}

上述代码告诉webpack需要3个独立分离的依赖图，在多页面应用中，每当页面跳转时，服务器将为你获取一个新的HTML文档，页面重新加载新文档，并且资源被重新加载；然而，这给了我们特殊的机会做很多事情：例如使用CommonsChunkPlugin为每个页面之间的应用程序共享代码创建bundle。由于入口起点增加，多页面应用能够复用入口起点之间的大量代码/模块，从而极大的从这些技术中受益；

单页面程序和第三方库入口

const config=[
    entry:{
        app:'./src/app.js',
        vendors:'/src/vendors.js'
    }
}

上述代码，从表面上看，告诉webpack从app.js和vendor.js开始创建依赖图（dependency graph）;这些依赖图是完全分离，互相独立的（每个bundle中都有一个webpack引导（bootstrap）），这种方式比较常见于，只有一个入口起点的单页面应用程序中；这个设置允许你使用CommonsChunkPlugin从应用程序bundle中提取vendor引用到vendor bundle，并且把引用vendor的部分替换为webpack_require()调用，如果应用程序bundle中没有vendor代码，那么你可以在webpack中实现被称为长效缓存的通用模式；