導入外部組件，構建的WebPack重複模塊

-1

陣營項目
的WebPack 1.14
導入外部組件，構建的WebPack重複模塊

問：
MODA和MODB不在項目。它們是外部組件。
進口MODA到商業方法
進口MODA和MODB到index.js
的WebPack建立
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"] 
}

條目。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') 
);

組件目錄

- 出組分
- 模
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
有兩個相同MODA在bundle.js：

First ModA PrintScreen