代码分离是webpack一个非常重要的特性，将代码分离到不同的bundle文件中，到时候可以按需加载或者并行加载这些文件。
webpack通过代码分离来控制加载资源的优先级提高代码的加载性能。
webpack常用的三种代码分离方式：
入口起点：使用entry配置手动分离代码。
防止重复：通过Entry Dependencies 或者 SplitChunksPlugun 去重和分离代码。
动态导入：通过模块的内联函数调用来分离代码。
入口起点：
entry: { main: "./src/main.js", index: "./src/index.js" }, output: { filename: "[name].bundle.js" path: resolveApp("./build") }
防止重复:
entry: { main: { import: "./src/main.js", dependOn: "lodash" }, index: { import: "./src/index.js", dependOn: "lodash" }, lodash: "lodash" }, output: { filename: "[name].bundle.js" path: resolveApp("./build") }
optimization: { splitChunks: { // async 异步导入 // initial 同步导入 // all 异步、同步导入 chunks: "all", minSize: 20000, maxSize: 30000, minChunks: 1 //表示引入的包，至少被导入几次 cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, filename: "[id]_vendor.js" } } } }
动态导入:
第一种：使用ECMAScript中的 import() 语法来完成（推荐）
第二种：使用webpack 遗留的 require.ensure
原文：https://www.cnblogs.com/czx7020866/p/15043546.html