使用Webpack將es6類​​構建為單獨的文件

Question

我正在嘗試為常用的React組件建立一個存儲庫，然后可以將其添加到諸如component-kit項目中並重復使用這些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將這些導入中的每一個構建到單獨的文件中，這是根據此處提供的代碼拆分文檔的配置

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 ，我不知道如何設置輸出文件具有組件名稱即MyComponent.js因此我可以像上面提到的那樣包含它。 理想情況下，它們將不包含任何反應，因為它將始終存在於父組件中。

Answer 1

我認為，如果您使用像JSX這樣的基於babel的語言，則最好使用babel達到此目的。
看一下這個 material-ui npm腳本。
我認為Webpack通常適合捆綁生產應用程序。
如果您堅持使用webpack，則可以使用節點fs獲取文件名，並動態生成類似此答案的條目。