javascript - webpack 2 lazy loading

Question

I have dynamic import modules with common dependency, and i need common.js with g.js (in this example), but it does not work, i have empty common. What is wrong? I want common with g.js

index.js

System.import("./d")
    .then( (module) => {

    });

System.import("./t")
    .then( (module) => {

    });

t.js

import "./g";

module.exports = {
    x: 5
}

d.js

import "./g";

export function message() {
    alert("msg")
}

webpack.config.js

module.exports = {
    entry: {index: "./index.js"},
    context: __dirname,
    output: {
        filename: "dist/[name].js"
    },
    resolve: {
        modules: [
            "bower_components",
            path.resolve('./'),
        ],
    },
    plugins: [
       new webpack.optimize.CommonsChunkPlugin({
            name: `common`,
            async: true
        })
    ]
};

Answer 1

module.exports = {
    entry: {index: "./index.js"},
    context: __dirname,
    output: {
        filename: "dist/[name].js"
    },
    resolve: {
        modules: [
            "bower_components",
            path.resolve('./'),
        ],
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
                children: true,
                async: true,
           }))
    ]
};