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

Question

我正在尝试为我常用的 React 组件建立一个存储库，然后我可以将其添加到我的项目中，例如 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，我不知道如何以文件的方式进行设置输出具有组件名称，即 MyComponent.js，因此我可以像上面提到的那样包含它。理想情况下，这些不会将 React 包含到其构建中，因为它将始终存在于父组件中。

Answer 1

我认为如果你使用像 JSX 这样基于 babel 的语言，最好使用 babel 来实现这个目的。
看看this Material-ui npm 脚本。
我认为 Webpack 通常适合捆绑生产应用程序。
您可以使用节点 fs 获取文件名并动态生成类似 This answer 的条目。如果你坚持使用 webpack。