webpack require

webpack推荐将所有可能用到的文件（模块）都打包。但是这样做仅适合使用率较高的小体积模块。对于体积大有不常用的模块，反而显得不适合。

在webpack工程中直接require线上url。运行的时候会抛出一个异常——不能找到模块，那是因为对于打包后的js中默认是在这个包内查找模块，或者说webpack工程中的require函数默认是在包（文件）内找，压根儿就没打算发起http请求。

webpack官方给出了解决方案——Code Splitting。

还是All in one 还是打包成一个包，还是在包内部找模块，只是这一个包不一定只有一个文件。我们直译Code Splitting为“代码拆分”，也就是说我们可以理解为将all in one的包再拆成多个包，当需要引用的时候再引用下载、加载，只是这种加载是通过webpack内部机制发起http请求实现的。我们将某个不常用的大体积模块从包中分离出来，当包内的语句引用到了这个模块后，webpack会判断这个模块是被分离出去的，应当发起http请求拉取。不是不能拉向上模块，只是只拉和自己有渊源的模块。

webpack通过require.ensure知道这个模块被分离了。通过不同的API就相当于一种标记，在打包时分出去、引用时发请求动态加载。我要引用A、B、C、D 四个插件，A、C可能往往一起用，B、D可能往往一起用。我就需要在webpack打包后生成3个文件：包含主文件的js（大量常用模块）、包含A和C的分离包、包含B和D的分离包。

这时会生成三个文件bundle.js,bundle1.js,bundle2.js，会先加载bundle.js，然后在内部动态加载bundle1.js和bundle2.js。默认在同级目录下找，可配置其余目录。

作用：可以将第三方插件与业务代码分离出来，最大化利用缓存。减少请求。