Webpack。构建组件库

Question

我想构建我的组件库，例如在Material-UI中。

所有构建都应该动态地遍历目录

有一件事我搞不懂，那就是分别组装每个按钮、select等，这样你就可以在dist目录中找到这个了：

dist/Buttons/PrimaryButton/PrimaryButton.js

dist/Buttons/PrimaryButton/SecondaryButton.js

我的webpack配置：

const path = require("path");

module.exports = {
  entry: "./src/components/lib.ts",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "dist"),
    library: "",
    libraryTarget: "commonjs"
  },
  module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.(j|t)s?$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.s[ac]ss$/i,
        use: ["style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|ico)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "assets/[name].[ext]"
            }
          }
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "src/assets/fonts/[name].[ext]"
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [".js", ".ts", ".tsx"],
    alias: {
      components: path.resolve(__dirname, "src/components"),
      constants: path.resolve(__dirname, "src/constants"),
      assets: path.resolve(__dirname, "src/assets"),
      styleguide: path.resolve(__dirname, "src/styleguide")
    }
  }
};

我的PrimaryButton：

import React from "react";
import "./style.sass";
import { IButton } from "components/Buttons/Interfaces/IButton";

const PrimaryButton: React.FC<IButton> = ({ children, onClick, ...rest }) => {
  const handleClickButton = () => {
    onClick();
  };
  return (
    <button className="primary-button" onClick={handleClickButton} {...rest}>
      {children}
    </button>
  );
};

export default PrimaryButton;

和lib.ts：

import PrimaryButton from "./Buttons/PrimaryButton/PrimaryButton";

export { PrimaryButton };

我在谷歌上找到了类似这样的东西，但它构建了我的index.js文件，没有按钮，我将其导出到lib.js

Answer 1

您可以检查webpack docs on entry points及其各种选项：

  entry: {
    "Buttons/PrimaryButton/PrimaryButton": './src/path/to/primaryButton.js',
    "Buttons/PrimaryButton/SecondaryButton": './src/path/to/secondaryButton.js',
  },