提供给 Firebase 托管的 Webpack 包不完整,使用 Webpack 服务器没有问题

问题描述 投票:0回答:0

所有 JS 代码都与 Webpack 捆绑到一个 main.js 文件中。图像、style.css 和 index.html 使用 miniCSSExtractPlugin、asset/resource 和 HTMLWebpackPlugin 处理。生成 bundle 时,index.js 文件由 HTMLWebpackPlugin 导入到 index.html 中。

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 模拟器或 Firebase 托管时,index.js 中的所有代码(例如简单的 console.log())都会消失。但是,所有导入 index.js 的函数都可以在网站上执行和显示。 style.css、index.html 或 main.js 包中的任何其他内容都没有问题。

显示如下问题:

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

在提供给 Firebase 时查看 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
}

不确定可能是什么问题。查看捆绑包,将 index.js 导入到 index.html 文件中没有问题。 main.js 的其余部分工作正常。唯一没有显示的是 index.js 中的函数代码。所有导入都可以从 index.js 正常工作,包括 style.css、其他函数等。

firebase webpack config bundle
© www.soinside.com 2019 - 2024. All rights reserved.