webpack - 网页包。构建组件库

Question

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

所有构建都应该动态地通过目录

我想不通的一件事是单独组装每个按钮、选择等，以便您最终在 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")
    }
  }
};

我的主要按钮：

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

标签： webpack

Answer 1

您可以查看webpack 文档的入口点及其各种选项：

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