导入外部组件，webpack构建重复模块

Question

反应项目
webpack 1.14

问题：
ModA和ModB不在项目中。它们是外部组件 将ModA导入ModB
将ModA和ModB导入index.js
webpack build
bundle.js有两个相同的ModA模块。

项目目录

  

- 项目外    - 资产
  bundle.js
  react.js
   - js
  entry.js
  + node_modules
  .babelrc
  index.html的
  的package.json
  webpack.config.js
  yarn.lock

package.json依赖项

"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')
);

组件目录

  

- 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运行webpack
获取bundle.js
bundle.js中有两个相同的ModA：

许多项目都会使用组件 组件应在独立目录中找到。

如何解决重复问题？

Answer 1

使用DedupePlugin
new webpack.optimize.DedupePlugin（）
https://github.com/webpack/docs/wiki/optimization