webpack2代码分割

代码分割-CSS
要通过webpack打包CSS，像任何其他模块一样将CSS导入JavaScript代码，并使用css-loader（它输出CSS作为JS模块），
并可选地应用ExtractTextWebpackPlugin（它提取打包的CSS并输出CSS文件）。
导入CSS
使用 css-loader
在 webpack.config.js 中配置 css-loader , 如下:
module.exports = {
    module: {
        rules: [{
            test: /.css$/,
            use: 'css-loader'
        }]
    }
}
这有个缺点，您将无法利用浏览器的异步和并行加载CSS的能力。这样，您的网页必须等待，直到您的整个JavaScript 包下载完成，然后重绘网页。
webpack可以通过使用ExtractTextWebpackPlugin分别打包CSS来帮助解决这个问题。
使用 ExtractTextWebpackPlugin
安装 ExtractTextWebpackPlugin 插件，如下：
npm i --save-dev extract-text-webpack-plugin@beta
要使用此插件，只需要在webpack.config.js文件中添加两个步骤。
module.exports = {
    module: {
         rules: [{
            test: /.css$/,
            use: 'css-loader'
            use: ExtractTextPlugin.extract({
                use: 'css-loader'
            })
         }]
     },
    plugins: [
        new ExtractTextPlugin('styles.css'),
    ]
}
通过上述两个步骤，您可以专门为所有CSS模块生成新的bundle，并将它们作为单独的标记添加到index.html中。
代码分割 - 使用 require.ensure
webpack 在编译时，会静态地解析代码中的 require.ensure()，同时将模块添加到一个分开的 chunk 当中。这个新的 chunk 会被 webpack 通过 jsonp 来按需加载。
require.ensure(dependencies: String[], callback: function(require), chunkName: String)
依赖 dependencies
这是一个字符串数组，通过这个参数，在所有的回调函数的代码被执行前，我们可以将所有需要用到的模块进行声明。
回调 callback
当所有的依赖都加载完成后，webpack会执行这个回调函数。require 对象的一个实现会作为一个参数传递给这个回调函数。因此，我们可以进一步 require() 依赖和其它模块提供下一步的执行。
chunk名称 chunkName
chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。通过提供 require.ensure() 不同执行点相同的名称，我们可以保证所有的依赖都会一起放进相同的 文件束(bundle)。
require.ensure() 的坑点
空数组作为参数
require.ensure([], function(require){
    require('./a.js');
});
以上代码保证了拆分点被创建，而且 a.js 被 webpack 分开打包。
依赖作为参数
require.ensure(['./a.js'], function(require) {
    require('./b.js');
});
上面代码， a.js 和 b.js 都被打包到一起，而且从主文件束中拆分出来。但只有 b.js 的内容被执行。a.js 的内容仅仅是可被使用，但并没有被输出。
想去执行 a.js，我们需要异步地引用它，如 require('./a.js')，让它的 JavaScritp 被执行