大廈ES6類爲獨立的文件用的WebPack

Question

我，試圖建立一個資料庫我常用的反應組件然後我可以添加到我的項目，如component-kit和重用這些，所以像

import MyComponent from 'component-kit/MyComponent'; 

目前我有以下項目結構：

component-kit/ 
    src/ 
    MyComponent/ 
     index.js 
    index.js 
    package.json 
    webpack.config.js 

index.js文件導入的所有組件按以下方式：

import('./MyComponent'); 

然後我用的WebPack構建每個這些進口到單獨的文件，這裏是我的配置是每間可用here

const webpack = require('webpack'); 

module.exports = { 
    entry: './src/index.js', 
    output: { 
    filename: 'dist.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     exclude: /(node_modules|bower_components)/, 
     use: { 
      loader: 'babel-loader', 
      options: { 
      presets: ['env', 'es2015', 'stage-0', 'react'], 
      plugins: ['syntax-dynamic-import'] 
      } 
     } 
     } 
    ] 
    } 
}; 

在這個輸出2個文件dist.js和0.dist.js，我可以瞬間代碼分裂文檔不知道如何設置這個文件outputet有組件名稱，即MyComponent.js，所以我可以比上面提到的包括它。 理想情況下，這些內容不會在其構建中包含反應，因爲它始終存在於父組件中。

Answer 1

我認爲如果您使用基於babel的語言（如JSX），最好使用babel來實現此目的。
請看this material-ui npm腳本。
Webpack通常適用於捆綁生產應用程序，我認爲。
如果您堅持使用webpack，您可以使用節點fs獲取文件名並動態生成條目，如This answer。