使用 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，我不知道如何以文件 outputet 具有组件名称的方式进行设置，即 MyComponent.js所以我可以像上面提到的那样包含它。理想情况下，这些不会包括对其构建的反应，因为它始终存在于父组件中。

Answer 1

我认为如果你使用像 JSX 这样基于 babel 的语言，那么为此目的使用 babel 会更好。
看看 this material-ui npm script.
我认为 Webpack 通常适合打包生产应用程序。
如果你坚持使用 webpack，你可以使用节点 fs 获取文件名并动态生成条目。

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

Building es6 classes into separate files with webpack

javascript

reactjs

webpack

code-splitting

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

Building es6 classes into separate files with webpack

javascript

reactjs

webpack

code-splitting

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