深入浅出webpack只配置文件分离、代码分离、代码懒加载配置文件分离和判断开发环境根补录创建config文件夹，创建

配置文件分离和判断开发环境

根补录创建config文件夹，创建三个文件webpack.common.js,webpack.dev.js,webpack.prod.js
package.json创建scripts
判断开发环境
- 根据配置文件直接区分
- 根据环境变量进行区分

entry入口知识补充

entry写相对路径的时候，并不是相对于文件所在的路径，而是相对于context配置的路径

配置文件合并

npm i webpack-merge -D，使用这个插件来进行配置文件的合并

代码分离

代码分离
- 将代码分离到不同的bundle中，之后我们可以按需加载，或者并行加载这些文件
- 默认情况下，所有的js代码（业务代码，第三方依赖，暂时没用到的模块）在首页全部加载，就会影响首页的加载速度
- 代码分离可以分出更小的bundle，以及控制资源加载优先级，提高代码的加载性能

webpack常用代码分离方法

入口起点：使用entry手动分离代码

防止重复：使用Entry Dependencies（不推荐）或者SplitChunksPlugin（webpack默认已经集成，不需要单独安装）去重和分离代码

module.exports = {
    //...,
    // 优化
    optimization:{
        // 自然数，不常用，不推荐
        // chunkIds:"natural",
        // 对调试更友好的可读的 id，见名知意，使用所在包目录作为名称（开发环境推荐）
        // chunkIds:"named",
        // 在不同的编译中不变的短数字 id。有益于长期缓存。在生产模式中会默认开启。
        chunkIds:"deterministic",
        splitChunks:{
            // 同步和异步代码
            chunks:'all',
            // 同步代码
            // chunks:'initial',
            // 异步代码会被分离
            // chunks:"async",
            // 最小尺寸，表示如果我们拆分出来一个包，这个包的至少要大于minSize才能进行拆分,默认值20000
            // minSize:0,
            // 表示大于maxSize的包将再次进行拆分，拆分后的包不小于minsize
            // maxSize: 0,
            // 表示引入的包至少被导入了几次，满足条件才会被拆分
            // minChunks:1,
            cacheGroups:{
                vendors:{
                    test:/[\\/]node_modules[\\/]/,
                    // 固定名称
                    // name:'chunkVendors',
                    filename:"[id]_vendors.js"
                },
                // 表示匹配到test开头的文件，打包到单独js文件，一般不常用
                test:{
                    test:/test/,
                    filename:"[id]_test.js"
                },
            }
        },
        // true/multiple 表示会根据入口文件进行打包，多个入口就会生成多个runtime的js文件
        // single 表示无论多少入口文件，就只会合并生成一个
        // runtimeChunk:"single"
        runtimeChunk:{
            // 这样配置就会合并生成一个文件
            // name:'awei'

            // 这样设置会根据入口文件生成文件
            name:function(entryPoint){
                return `awei-${entryPoint.name}`
            }
        }
    },
}

动态导入：通过模块的内联函数调用来分离代码。第一种：使用ECMAScript中的import()语法来完成，也是目前推荐的方式；第二种：使用webpack遗留的require.ensure，目前不推荐使用；

代码懒加载

prefetch(预获取)：将来某些导航下可能需要的资源（也就是在浏览器加载完其他资源的时候，利用空闲时间来进行加载）
preload(预加载)：当前导航下可能需要资源（表示在加载父级资源的时候，如果有引用其他资源，就会把其他资源一起加载进来）
- preload chunk 会在父 chunk 加载时，以并行方式开始加载。prefetch chunk 会在父 chunk 加载结束后开始加载。
- preload chunk 具有中等优先级，并立即下载。prefetch chunk 在浏览器闲置时下载
- preload chunk 会在父 chunk 中立即请求，用于当下时刻。prefetch chunk 会用于未来的某个时刻