Webpack, bundle loader and common chunk plugin issue

Question

I have a page A.js and a page B.js and have base class base.js for it. I import base.js for each A and B and use it as extend for class A and B.

My router loads those pages via require('bundle!pages' + url + '.js'); I would like to have base.js as a part of one common.js. I added common chunk plugin to webpack new webpack.optimize.CommonsChunkPlugin({ children: true, name: 'common', filename: 'common.js', minChunks: 2, }) but as an output I still have duplicated base.js in class a.js and b.js. Is there any issue with bundle loader and common chunk plugin?

a.js

import Base from '../base';

class A extends Base {
    constructor() {
        super();
    }

    create() {}
}

export default A;

b.js

import Base from '../base';

class B extends Base {
    constructor() {
        super();
    }

    create() {}
}

export default B;

base.js

class Base {
    constructor() {}
}

export default Base;

router.js

let loader = require('bundle!pages' + url + '.js');
loader((module) => callback(module.default));

Answer 1

Try this: in webpack.config.js add to the exporting object this property

externals: { 'base': 'Base' }

and include this in your html header

I think that feature is from webpack 2