如何用Webpack/Rollup生成StencilJS组件的有效单文件Bundle？

方案一：直接通过Stencil配置生成单文件（推荐） #

Stencil本身支持直接生成单个自定义元素bundle，无需额外依赖Webpack。修改你的stencil.config.js，在dist-custom-elements输出目标中添加bundle: true配置：

export const config: Config = {
  namespace: 'geographicaladdressjs',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
      externalRuntime: false,
      bundle: true, // 新增此配置，生成单文件bundle
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],
  // 其余配置保持不变
  testing: {
    browserHeadless: "new",
    collectCoverage: true,
    clearMocks: true,
    resetMocks: true,
    coverageDirectory: "./reports",
    coverageReporters: ["html", "text", "lcov"],
    reporters:['default', ["jest-html-reporters", {
      "publicPath": "./reports",
      "expand": true,
    }]]
  },
  minifyJs: true,
  minifyCss: true,
  sourceMap: false
};

执行npm run build后，会在dist/custom-elements目录下生成单个包含所有组件的JS文件，可直接在浏览器中引入使用，无需额外处理。

方案二：调整Webpack配置以正确打包 #

如果必须使用Webpack，需要修正以下核心问题：

1. 改用Stencil生成的UMD格式入口文件，而非ESM格式
2. 配置输出为浏览器兼容的IIFE/UMD格式
3. 移除不必要的TS编译规则（入口为已编译的JS文件）

修改后的Webpack配置如下：

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './dist/geographicaladdressjs/index.umd.js', // 改用UMD格式入口
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'GeographicalAddressJS', // 全局变量名，可选
    libraryTarget: 'iife', // 输出为立即执行函数，适配浏览器环境
  },
  resolve: {
    extensions: ['.js'],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader', // 可选，用于兼容旧版浏览器
      },
    ],
  },
};

执行Webpack打包后，生成的bundle.js即可在浏览器中正常加载使用。

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