单个entry的深层次依赖代码分割

• pageA 和 pageB 是异步加载的
• pageC 和 pageA 都依赖 reusableComponent
• pageB 异步加载 PageC

打包后的文件:

• output.js 是 entry chunk 包括了
  • 模块系统
  • chunk 加载逻辑
  • 入口 example.js
• 0.output.js
  • reusableComponent
• 1.output.js
  • module pageB
• 2.output.js
  • module pageA
• 3.output.js
  • module pageC

webpack.config.js

"use strict";
const path = require("path");
module.exports = {
    // mode: "development || "production",
    entry: {
        main: ["./example.js"]
    },
    optimization: {
        splitChunks: {
            minSize: 0 // This example is too small, in practice you can use the defaults
        },
        chunkIds: "deterministic" // To keep filename consistent between different modes (for example building only)
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "output.js"
    }
};

example.js

var main = function() {
    console.log("Main class");
    require.ensure([], () => {
        const page = require("./pageA");
        page();
    });
    require.ensure([], () => {
        const page = require("./pageB");
        page();
    });
};
main();

pageA.js

var reusableComponent = require("./reusableComponent");
module.exports = function() {
    console.log("Page A");
    reusableComponent();
};

pageB.js

module.exports = function() {
    console.log("Page B");
    require.ensure([], ()=>{
        const page = require("./pageC");
        page();
    });
};

pageC.js

var reusableComponent = require("./reusableComponent");
module.exports = function() {
    console.log("Page C");
    reusableComponent();
};