webpack代码分割-使用require.ensure

1.背景

    webpack是一款很好用的模块打包机，当我们开发单页应用时，很常见的需求是把一堆模块打包成一个文件，这时webpack就派上用场了。但是在一些场景下，我们可能有这样的需求：一方面需要把一系列的文件打包成一个文件，另一方面还有一些模块是需要按需加载的（比如一个网站有多个页面，可以一开始加载主页，然后根据用户的操作再请求相应的其他页面），这时候就需要用到webpack提供的代码分割的功能。

2.简介

    如果我们想要做到按需加载，那么就需要webpack按需分割。webpack需要做的工作有两方面：第一是要把各个需要按需加载的模块切片成不同的文件（每个模块存在一个文件里，这个文件叫做一个切片）而不是打包到一个文件里。第二是在我们需要时引入。这样，相应地，就需要我们做两方面工作：第一是告诉webpack切片文件存放的位置。第二就是告诉webpack什么时候引入切片。下面说明一下我们怎么进行这两方面的工作。

3.切片位置配置

    webpack的配置文件中，有一个module.exports对象，其中有一个属性output，我们在这个属性下配置切片放置位置，详情参见webpack文档

4.何时引入切片文件

    对于webpack来说，是何时引入切片文件，对于我们来说，是如何引入模块。我们通过require.ensure来进行模块的异步引用。语法为：

require.ensure(dependencies: Str