【初体验】【学习】Web Component

序言

欢迎来到2025年的第一篇博客!新的一年,将持续深耕于新知识的学习,并不断深化对已有知识的理解。目标是构建一个更加系统化、结构化的知识体系,以更好地应对未来的挑战与机遇。

前言

需要以下基础:

假设您已经了解所有知识点,并且您的环境中已安装了 Node.js和npm ,我们现在可以进行下一步。

创建项目

首先,我们需要创建一个新的项目目录,并初始化项目:

sh 复制代码
mkdir web-component-demo
cd web-component-demo
npm init -y

安装依赖

接下来,我们需要安装一些必要的依赖:

sh 复制代码
npm install --save-dev webpack webpack-cli webpack-dev-server style-loader css-loader html-webpack-plugin 

配置 Webpack

在项目根目录下创建一个 webpack.config.js 文件,并添加以下内容:

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: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./public/index.html"),
    }),
  ],
};

创建项目结构

在项目根目录下创建以下目录和文件:

复制代码
web-component-demo/
├── public/
│   └── index.html
├── src/
│   ├── index.js
│   └── styles.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 文件中添加以下内容:

js 复制代码
import "./styles.css";

class MyComponent extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.className = "wrapper";
    this.textContent = "Hello, Web Component!";
  }
}

customElements.define("my-component", MyComponent);

编写 CSS 文件

src/styles.css 文件中添加以下内容:

css 复制代码
.wrapper {
  font-size: 20px;
  color: blue;
}

启动开发服务器

package.json 文件的 scripts 部分添加以下内容:

json 复制代码
"scripts": {
  "start": "webpack serve --open"
}

然后运行以下命令启动开发服务器:

sh 复制代码
npm start

总结

通过以上步骤,我们创建了一个简单的 Web Component 项目,并使用 Webpack 进行打包和开发服务器的配置。欢迎在评论区分享您的意见和建议。

相关推荐
牧羊狼的狼3 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手4 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one4 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲4 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell5 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830946 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮6 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
茯苓gao7 小时前
STM32G4 速度环开环,电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习
excel7 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
是誰萆微了承諾7 小时前
【golang学习笔记 gin 】1.2 redis 的使用
笔记·学习·golang