Web Components 是一种基于现代 Web 平台提供的 API，使得用户可以开发自定义的组件并且可以在不同的 Web 应用中复用。Web Components 兼容所有主流浏览器，同时可以在 Shadow DOM、HTML Imports 和 Custom Elements 等选项中进行自定义实现。本文主要讲述 Web Components 在 Webpack 中的打包方法，并提供详细的学习和指导意义。
Webpack 中 Web Components 的打包
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器，主要用于在 Web 上开发单页面应用程序（SPA）。Webpack 将多个模块打包成一个整体，从而使得应用程序的可维护性，可扩展性得到了极大的提高。在 Webpack 中，可以使用多种技术来实现 Web Components 的打包。
使用 webpack-dev-server
webpack-dev-server 可以在本地主机上启动一个开发服务器，并且支持实时重新加载。webpack-dev-server 可以与 Web Components 良好地配合使用，只需在 webpack.config.js 文件中配置相关选项即可。
以下是一个简单的 Webpack 配置示例：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
--
-
----- ----------
-------- ---------------
---- --
------- -------------
--
--
-
----- ---------
---- -
---------------
------------
-
-
-
--
---------- -
------------ ---------
----- -----
---- ----
-
--在以上配置中，我们配置了 entry、output、module 和 devServer 等常用选项。其中的 rules 部分用于配置 Webpack 模块处理的规则，与 Web Components 密切相关。我们使用 babel-loader 工具将 ES6 语法转换为 ES5 语法，使用 html-loader 工具将 HTML 文件转换为 JavaScript 模块，方便 Web Components 的使用。style-loader 和 css-loader 用于加载样式表文件。
使用 webpack-dev-server 命令启动开发服务器，实现 Web Components 的预览与测试：
$ npx webpack-dev-server --open
在浏览器中输入 http://localhost:8080/ 访问，即可预览 Web Components 的效果。实时修改代码后，webpack-dev-server 会自动编译并重新加载。
使用 @webcomponents/webcomponentsjs
@WebComponents/WebComponentsJS 是用于支持 Web Components 的官方 Web 库，它提供了许多基础 Web Components 的实现以及对浏览器的 polyfill，增强了 Web Components 的兼容性。
以下是使用 @webcomponents/webcomponentsjs 的 Webpack 配置示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
------- -
------ -
-
----- ---------
---- ---------------- --------------
--
--
--
-------- -
--- -------------------
--------- -----------------
---
--
-------- -
------ -
---------------------------------
-------------------------------------------------------------------
--
--
---------- -
------------ -------------------- --------
--------- -----
----- ----
--
--在 webpack.config.js 文件中，我们使用了 @webcomponents/webcomponentsjs 的 polyfill 版本，并且在 resolve 部分指定了别名。安装库：
npm install @webcomponents/webcomponentsjs
在 HTML 中引入以下代码：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
---------- ------------------
------- -----------------------------------------------------------------------------------------------
-------
------
----------------- ---- --------- --- --------- ---
------- ------------- ------------------------- ---- ---- ---------- -- ---
-------
-------使用 Polymer CLI 和 LitElement
Polymer CLI 是谷歌开源的 Web Components 开发工具，它提供了一套命令行工具，帮助用户生成和管理 Web Components 项目。LitElement 是 Polymer CLI 官方推荐使用的 Web Component 实现库，它基于 Web Components 的标准，提供了更现代化的语法和更好的性能。在 Polymer CLI 和 LitElement 的帮助下，用户可以轻松地进行 Web Components 的开发和打包。
安装 Polymer CLI：
npm install -g polymer-cli
使用 Polymer CLI 初始化 Web Components 项目：
$ polymer init
在选择模板的时候，我们选择使用 Starter Kit 默认模板。在该模板中，我们可以看到已经预装了 LitElement 库。
在打包 Web Components 时，使用 Polymer CLI 会自动执行相关的构建和打包操作，因此无需进行繁琐的 Webpack 配置。以下是一个简单的项目结构示例：
-- -------------------- ---- -------
----------- ------------
----------
-------
--------
--------- -----------
---------------
-----------
-------------
------- --------------
------ ------------ ----- ---- --------------
------ ----- ----- ------- ---------- -
-------- -
------ -----
-------
----- -
-------- ------
-------- -----
----------------- ------
------ ------
-------------- ----
------- --- ----- -----
-
--------
------ --------
--------- ------ ---- -- -- --------
--
-
-
------------------------------- -------
---------在 HTML 文件中引用 Web Components：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
--------- -----------
------- ------------- -----------------------------
-------
------
----------------- ---- --------- --- --------- ---
-------
-------使用以下命令打包项目：
$ polymer build
以上命令将生成一个 dist 目录，包含了所有需要的资源（HTML、CSS、JavaScript 等）。可以将 dist 目录中文件的内容上传到静态文件服务器上，并在浏览器中打开即可预览 Web Components 的效果。
总结
Web Components 是一个强大的技术，提供了一种在 Web 上开发可重用组件的新方式。Webpack 提供了多种 Web Components 的打包方法，可以很好地工作在不同的场景下。同时，Polymer CLI 与 LitElement 也是我们常用的 Web Components 开发工具，让我们更快地完成我们的项目。在实践中，我们可以根据自己的实际需求选择合适的工具和方法。显然，了解 Web 开发和 Webpack 等工具的基础知识是非常重要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64631e56968c7c53b0421f67