在现代前端开发中，使用组件化的思维方式以及相应的工具是非常必要的。在这篇文章中，我们将使用 Webpack 与 React 16 来开发一个简单的组件库，并一步步了解如何构建它。
前置条件
这里我们假定您已经对 Webpack 有一些基本的了解，并且您对 React 及相关技术也有所了解。如果您对 Webpack 和 React 还不太熟悉，可以参考以下资源：
- Webpack 官方文档: https://webpack.js.org/
- React 官方文档: https://reactjs.org/
创建项目
首先我们需要创建一个新项目，可以使用以下命令：
mkdir my-components && cd my-components npm init -y
然后我们将安装必要的依赖：
npm i webpack webpack-cli webpack-dev-server react react-dom npm i babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
这里我们使用 Webpack 作为打包工具，并安装相应的依赖；然后我们还安装了 Babel 和 React 相关的依赖，它们将用于编译和处理我们的代码。
下一步，我们需要创建一个 src 目录，并在其中创建我们的组件：
mkdir src && cd src touch index.js Button.js
其中，index.js 会作为入口文件，而 Button.js 是我们的组件文件。
开发组件
在 Button.js 中，我们可以创建一个非常简单的按钮组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------ - -- --------- ------- -- -- -
------- ------------------
----------
---------
--
------ ------- -------这里我们使用了函数式组件的方式创建了一个 Button 组件，它接收一个 children 和一个 onClick 属性，并返回一个 <button> 元素。这是一个非常简单的 React 组件示例。
配置 Webpack
接下来，我们需要配置 Webpack，使得它能够编译我们的代码并生成可用的输出。在根目录下，创建一个 webpack.config.js 文件，并输入以下内容：
-- -------------------- ---- -------
-------------- - -
----- --------------
------ -----------------
------- -
--------- -------------------
----- --------- - --------
-------- ---------------
-------------- ------
--
---------- -
------------ ---------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
--
--
--
--
--这里我们配置了 Webpack，指定了入口文件 ./src/index.js，以及输出文件名 my-components.js，并指定了生成 UMD 模块的方式。同时，我们还指定了 Babel 的编译规则。
我们还需要在 package.json 文件中添加以下脚本：
"scripts": {
"start": "webpack serve",
"build": "webpack --mode production"
}这样就可以使用 npm start 命令在本地启动服务器，并使用 npm run build 命令进行打包了。
编写示例
我们需要在 index.html 文件中加入相应的引用，并使用 MyComponents 对象调用我们的组件。可以在根目录下创建 index.html 文件，然后输入以下内容：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ---------- ------------
-------
------
---- ---------------
------- ---------------------------------------
--------
----- - ------ - - -------------
----- ---- - -------------------------------
----- ----------- - --- -- -
------------------- -----------
--
----------------------- --------------------------- ------------ ------
---------
-------
-------这里我们在 script 标签中引入了 my-components.js，然后使用 MyComponents 对象调用了我们的组件，最后在页面上渲染了 Button 组件。
打包输出
最后，我们使用 npm run build 命令进行打包，并在 dist 目录中生成 my-components.js。此时，我们就可以将 my-components.js 文件作为组件库使用了。
总结
在这篇文章中，我们使用 Webpack 和 React 16 开发了一个简单的组件库，并介绍了整个开发流程以及相关的使用方式。希望本文能对正在学习前端组件库开发的开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c1a94783d39b48815e5d17