使用webpack将es6类​​构建到单独的文件中

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

如果您使用像JSX这样的基于babel的语言，我认为最好将babel用于此目的 看一下this material-ui npm脚本 我认为Webpack通常适用于捆绑生产应用程序 您可以使用节点fs获取文件名，如果您坚持使用webpack，则可以动态生成This answer等条目。