Firebase托管显示通用消息

时间:2019-07-26 17:49:15

标签: firebase firebase-hosting

许多问候开发社区。祝大家... 自昨天以来我一直面临着一种情况 我正在构建一个Whats App克隆应用(https://github.com/adrielwerlich/curso-hcode-whatsapp-clone

1-运行构建命令 2-运行firebase deploy --only托管命令

但这是我得到的屏幕

enter image description here

Firebase仪表板正在显示

enter image description here

欢迎任何帮助...非常感谢...

编辑

我能够取得一些进步

1-已添加到

webpack.config.js

new HtmlWebpackPlugin({
  template: './index.html',
})

,现在有适当的html内容... 但是当我尝试使用firebase serve

时,app.bundle.js给出了错误消息

enter image description here

1 个答案:

答案 0 :(得分:0)

发现捆绑包仅创建了js文件,并且还必须配置HtmlWebpackPlugin以创建HTML文件之后,问题是使js文件对html文件可见。

因此,使捆绑软件在本地firebase serve命令和远程Firebase托管服务中运行的最终解决方案...

整个问题都与webpack捆绑包配置有关

webpack.config.js

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

module.exports = {
    entry:{
        app:'./src/app.js',
        'pdf.worker':'pdfjs-dist/build/pdf.worker.entry.js'
    },
    output:{
        filename:'[name].bundle.js',
        path: path.join(__dirname, '/dist'),
        publicPath:'/' // the issue was here. Instead of /dist only / makes the js bundle files visible inside the html index file
    },
    module: {
        loaders: [
            {
                test: /\.css/,
                loaders: ['style-loader', 'css-loader']
                // include: __dirname + '/'
            },
            {
                test: /.(gif|png|jpe?g|webp|svg)$/i,
                use: [
                    'file-loader',
                   {
                     loader: 'image-webpack-loader',
                     options: {
                       webp: {
                         quality: 80
                       }
                     }
                   }
                 ]
            }
        ],
      },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
          })
    ]
}

,并且还必须配置de css样式的加载器和图像Webpack加载器,以便在firebase本地服务器和firebase远程托管服务中正常运行

遇到了捆绑包生成器配置的小细节...许多小时的焦虑...