Import external components, webpack build repeat modules

Question

React project
webpack 1.14

Question:
ModA and ModB are not in project. They are external components.
import ModA to ModB
import ModA and ModB to index.js
webpack build
bundle.js has two same ModA modules.

project directory

- out-project
    - assets
          bundle.js
          react.js
    - js
          entry.js
    + node_modules
       .babelrc
       index.html
       package.json
       webpack.config.js
       yarn.lock

package.json dependencies

"dependencies": {
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
},
"devDependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "webpack": "^1.14.0"
}

webpack.config.js

var webpack = require('webpack');
var path = require('path');
module.exports = {
entry:[
    './js/entry.js'
],
output: {
    path: __dirname + '/assets/',
    publicPath: "/",
    filename: 'bundle.js'
},
module: {
    loaders:[
        {
            test: /\.jsx?$/,
            exclude: /node_modules|assets/,
            loader: 'babel'
        }
    ]
},
externals: {
    "react": 'React',
    'react-dom': 'ReactDOM'
},
resolve: {
    extensions: ['', '.js', '.jsx'],
    alias: {
        'component': 'E:/experiment/out-component' //import external components
    }
}
};

.babelrc

{
    "presets": ["es2015","stage-0","react"]
}

entry.js

import React from 'react';
import ReactDOM from 'react-dom';

import ModA from 'component/mod/ModA.js';
import ModB from 'component/mod/ModB.js';

ReactDOM.render(
    <div>
        <h1>webpack</h1>
        <ModA/>
        <ModB/>
    </div>,
    document.querySelector('.wrapper')
);

component directory

- out-component
    - mod
          ModA.js
          ModB.js
    + node_modules
       .babelrc
       package.json
       yarn.lock

ModA.js

const ModA = () => <div>组件A</div>;
export default ModA;

ModB.js

import ModA from 'component/mod/ModA.js';
const ModB = () => {
    return (
        <div>
            <h3>组件B引入组件A</h3>
            <ModA/>
        </div>
    );
}
export default ModB;

CLI run webpack
Get bundle.js
There are two same ModA in bundle.js:

Components will used by many projects.
Components should found in independent directory.

How to solve the problem of repeat?

Answer 1

use DedupePlugin
new webpack.optimize.DedupePlugin()
https://github.com/webpack/docs/wiki/optimization