求助：使用Webpack从JS文件向HTML输出内容（含Firestore数据）

1. 初始化项目并安装依赖 #

先初始化npm项目，再安装Webpack核心工具、HTML生成插件和Firebase SDK：

npm init -y
npm install webpack webpack-cli html-webpack-plugin firebase --save-dev

2. 配置Webpack（webpack.config.js） #

在项目根目录创建webpack.config.js，指定入口文件、输出目录，并用html-webpack-plugin自动生成HTML并注入打包后的JS：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js', // 你的核心JS入口
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true, // 每次构建清空dist目录
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack + Firestore Demo',
      // 若有自定义HTML模板，添加 template: './src/index.html'
    }),
  ],
  mode: 'development', // 开发模式便于调试
};

3. 编写核心JS逻辑（src/index.js） #

在src目录下创建index.js，同时实现HTML内容输出和Firestore数据渲染：

// 1. 向页面输出基础HTML内容
const appRoot = document.createElement('div');
appRoot.id = 'app';
document.body.appendChild(appRoot);

appRoot.innerHTML = '<h1>Webpack + Firestore 演示</h1>';

// 2. 初始化Firebase并获取数据
import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore';

// 替换为你自己的Firebase项目配置（从Firebase控制台复制）
const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_SENDER_ID',
  appId: 'YOUR_APP_ID'
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// 异步加载并渲染Firestore数据
async function renderFirestoreData() {
  const dataList = document.createElement('ul');
  appRoot.appendChild(dataList);

  try {
    const snapshot = await getDocs(collection(db, '你的集合名称'));
    snapshot.forEach(doc => {
      const item = document.createElement('li');
      item.textContent = `${doc.id}: ${JSON.stringify(doc.data())}`;
      dataList.appendChild(item);
    });
  } catch (err) {
    console.error('数据加载失败:', err);
    appRoot.innerHTML += '<p>加载数据出错，请查看控制台日志</p>';
  }
}

renderFirestoreData();

4. 添加运行脚本（package.json） #

在package.json的scripts字段中添加：

"scripts": {
  "dev": "webpack serve --open", // 启动开发服务器并自动打开浏览器
  "build": "webpack" // 生产环境打包到dist目录
}

5. 启动项目 #

执行npm run dev，Webpack会启动开发服务器，自动打开浏览器，你就能看到页面上的基础内容和Firestore中的数据了。

关键注意事项 #

• 务必替换firebaseConfig为你自己的Firebase项目配置，否则无法连接Firestore
• 开发模式下无需手动在HTML中引入JS，html-webpack-plugin会自动注入打包后的脚本
• 如果使用自定义HTML模板，确保模板中存在挂载节点（比如<div id="app"></div>），方便JS定位渲染位置

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