Webpack打包部署Firebase托管异常：index.js代码丢失及报错排查

打包配置说明 #

所有JS代码通过Webpack打包为main.js，图片使用asset/resource处理，CSS通过MiniCssExtractPlugin提取为独立文件，HTML由HTMLWebpackPlugin生成并自动导入打包后的JS文件。Webpack配置如下：

const config = {
 entry: "./src/index.js",
 mode: 'none',
 experiments: {
   futureDefaults: true,
 },
 output: {
   path: path.resolve(__dirname, "public"),
   filename: '[name].[contenthash].js',
   clean: true,
 },
 devServer: {
   open: true,
   host: "localhost",
   static: {
     directory: path.join(__dirname, "public"),
   },
 },
 module: {
   rules: [
     {
       test: /\.js$/,
       use: 'babel-loader',
       exclude: /node_modules/
     },
     {
       test: /\.css$/,
       sideEffects: true,
        include: [
        path.resolve(__dirname, 'src/style.css'),
       ],
       use: [
         MiniCssExtractPlugin.loader,
         'css-loader'
       ]
     },
     {
      test: /\.(png|jpe?g|gif|svg)$/i,
      type: 'asset/resource'
     },
   ],
 },
 plugins: [
   new MiniCssExtractPlugin(
     { filename: '[name].[contenthash].css' },
     { experimentalUseImportModule: false },
   ),
   new HtmlWebpackPlugin({
     title: 'go outside today',
     template: './src/indexTemplate.html'
   }),
 ],
};

遇到的问题 #

开发环境（webpack-dev-server启动） #

内容正常展示，但控制台出现以下报错（不影响功能）：

ERROR in webpack/runtime/css loading
Cannot read properties of undefined (reading 'getChunkConditionMap'

Firebase部署/模拟器环境 #

• index.js中的自定义代码（如console.log语句）在打包后消失，但导入的页面展示类函数正常工作
• CSS、HTML及main.js其余部分均无异常
• 控制台抛出报错：

caught (in promise) TypeError: c[e] is not a function

报错代码位于打包后main.js的模块加载逻辑中：

function l(e) {
    var t = u[e];
    if (void 0 !== t)
        return t.exports;
    var r = u[e] = {
        exports: {}
    };
    return c[e](r, r.exports, l),
    r.exports
}

问题原因及解决办法 #

核心原因 #

experiments.futureDefaults: true是Webpack的实验性配置，启用了未来版本的默认特性，当前版本与MiniCssExtractPlugin等插件兼容性不足，导致CSS加载runtime出错，进而引发模块加载逻辑异常，最终造成自定义代码丢失和报错。另外mode: 'none'关闭了Webpack的默认优化和环境适配，加剧了打包逻辑的不稳定。

解决方案 #

1. 移除实验性配置
   删除Webpack配置中的experiments块，或者将futureDefaults设为false：

   // 修改后配置
   // experiments: {
   //   futureDefaults: true,
   // },
   // 或者改为
   experiments: {
     futureDefaults: false,
   },
   

   实验性特性稳定性差，生产环境不建议启用。

2. 调整mode配置
   将mode: 'none'改为对应环境的模式，生产环境用production，开发环境用development：

   mode: 'production', // 生产打包时使用
   // 开发环境可改为
   // mode: 'development',
   

   不同mode会自动启用对应环境的优化和默认配置，避免打包逻辑异常。

3. 全局配置CSS副作用
   将CSS的sideEffects配置移到项目根目录的package.json中，确保Webpack不会误删CSS相关代码：

   "sideEffects": [
     "*.css"
   ]
   

4. 更新依赖版本
   执行命令更新Webpack及相关插件到兼容的稳定版本：

   npm update webpack mini-css-extract-plugin html-webpack-plugin babel-loader
   

验证步骤 #

1. 执行本地生产打包：npm run build
2. 检查public目录下的main.js，确认自定义代码存在
3. 用本地服务器（如npx serve public）测试打包文件，确认无报错且功能正常
4. 重新部署到Firebase模拟器或托管，验证问题解决

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