页面加载后添加Web Components类定义的TS+Webpack解决方案

方案1：Webpack 5 内置 Asset Modules（无需额外安装loader） #

利用Webpack 5的asset/source模块，直接将TS组件类编译为JS字符串，方便动态插入到文档中：

步骤1：配置Webpack #

在webpack.config.js中添加规则，针对特定后缀（比如.raw.ts）的组件文件，先编译TS为JS，再导出为字符串：

module.exports = {
  module: {
    rules: [
      // 处理普通TS文件
      {
        test: /\.ts$/,
        exclude: /\.raw\.ts$/,
        use: 'ts-loader',
      },
      // 处理需要导出为字符串的组件TS文件
      {
        test: /\.raw\.ts$/,
        type: 'asset/source',
        use: 'ts-loader', // 先编译TS为JS
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
};

步骤2：编写组件类文件 #

创建MyNewTag.raw.ts，按正常TS语法编写Web Component类：

class MyNewTag extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<p>这是动态定义的Web Component</p>';
  }
}

步骤3：动态注入并定义组件 #

在业务代码中导入字符串形式的组件代码，动态创建script标签插入到文档头部，完成组件定义：

import myNewTagCode from './MyNewTag.raw.ts';

function registerDynamicComponent(tagName: string, componentCode: string) {
  const script = document.createElement('script');
  // 拼接代码：先定义类，再注册自定义元素
  script.textContent = `${componentCode}\ncustomElements.define('${tagName}', ${tagName.replace(/-([a-z])/g, (_, c) => c.toUpperCase())});`;
  document.head.appendChild(script);
}

// 调用注册（比如在需要动态添加组件时执行）
registerDynamicComponent('my-new-tag', myNewTagCode);

方案2：Webpack 4 使用 raw-loader #

如果仍在使用Webpack 4，可通过raw-loader实现相同效果：

步骤1：安装依赖 #

npm install raw-loader ts-loader --save-dev

步骤2：配置Webpack #

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /\.raw\.ts$/,
        use: 'ts-loader',
      },
      {
        test: /\.raw\.ts$/,
        use: ['raw-loader', 'ts-loader'], // 先编译TS为JS，再转为字符串
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
};

步骤3：组件编写与动态注册 #

和方案1完全一致，无需修改代码。

关键说明 #

• 用.raw.ts后缀区分需要导出为字符串的组件文件，避免影响普通TS代码的编译逻辑。
• 动态插入的script标签运行在全局作用域，确保类能被customElements.define正常访问。
• 编译后的JS代码直接在浏览器中执行，符合原生Web Component的注册要求。

内容的提问来源于stack exchange，提问作者Nabab