webpack学习第二天-代码分离

代码分离：当项目太大时，为了首次加载得速度，我们可能会需要模块得按需加载和分模块闲时加载，此时就需要代码分离。

代码分离得方式：

1. 多入口打包：使用entry配置手动分离（缺点：不同入口使用重复得模块会被分别打包）
   因为多入口打包会有公用代码重复打包得问题，所以需要配合Entry dependencies 或者 SplitChunksPlugin提取公共模块，该配置会让打包后生成一个公共部分模块，示例如下：

entry: {
        index: {
            import: './src/index.js',
            dependOn: ['shared', 'test']
        },
        print: {
            import: './src/print.js',
            dependOn: ['shared', 'test']
        },
        shared: './src/style.css',
        test: './src/shared.js'
    },

(上图为Entry dependencies示例) index、print作为两个入口文件，配置共同得dependOn： shared和test，shared和test分别指向公用得style.css和shared.js 文件，然后运行打包命令可以看到会多两个js文件，就是shared和 test 文件，该文件作为公用模块被提取了出来，

entry: {
        index: './src/index.js',
        print: './src/print.js'
    },
optimization: {
        splitChunks:{
            chunks: 'all'
        }
    },

SplitChunksPlugin有和Entry dependencies同样得效果。

2. 动态导入，通过使用import （）、require.ensure方式导入文件同样会生成单独得打包文件，并实现 预获取/预加载模块 预获取和预加载得区别及设定参考官方文档：https://webpack.docschina.org/guides/code-splitting/#prefetchingpreloading-modules