序言
欢迎来到2025年的第一篇博客！新的一年，将持续深耕于新知识的html" title=学习>学习，并不断深化对已有知识的理解。目标是构建一个更加系统化、结构化的知识体系，以更好地应对未来的挑战与机遇。
前言
需要以下基础：
- Web Component
- JavaScript
- HTML
- CSS
假设您已经了解所有知识点，并且您的环境中已安装了 Node.js和npm ，我们现在可以进行下一步。
创建项目
首先，我们需要创建一个新的项目目录，并初始化项目：
mkdir web-component-demo
cd web-component-demo
npm init -y
安装依赖
接下来，我们需要安装一些必要的依赖：
npm install --save-dev webpack webpack-cli webpack-dev-server style-loader html" title=css>css-loader html-webpack-plugin
配置 Webpack
在项目根目录下创建一个 webpack.config.js 文件，并添加以下内容：
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
/*** @type {import ("webpack").Configuration}*/
module.exports = {mode: "development",entry: path.resolve(__dirname, "./src/index.js"),output: {path: path.resolve(__dirname, "dist"),filename: "index.bundle.js",},module: {rules: [{test: /\.html" title=css>css$/,use: ["style-loader", "html" title=css>css-loader"],},],},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, "./public/index.html"),}),],
};
创建项目结构
在项目根目录下创建以下目录和文件：
web-component-demo/
├── public/
│ └── index.html
├── src/
│ ├── index.js
│ └── styles.html" title=css>css
├── package.json
└── webpack.config.js
编写 HTML 文件
在 public/index.html 文件中添加以下内容：
html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Web Component Demo</title></head><body><my-component></my-component></body>
</html>编写 JavaScript 文件
在 src/index.js 文件中添加以下内容：
import "./styles.html" title=css>css";class MyComponent extends HTMLElement {constructor() {super();}connectedCallback() {this.className = "wrapper";this.textContent = "Hello, Web Component!";}
}customElements.define("my-component", MyComponent);
编写 CSS 文件
在 src/styles.html" title=css>css 文件中添加以下内容：
html" title=css>css">.wrapper {font-size: 20px;color: blue;
}
启动开发服务器
在 package.json 文件的 scripts 部分添加以下内容：
"scripts": {"start": "webpack serve --open"
}
然后运行以下命令启动开发服务器：
npm start
总结
通过以上步骤，我们创建了一个简单的 Web Component 项目，并使用 Webpack 进行打包和开发服务器的配置。欢迎在评论区分享您的意见和建议。
