Firebase服务与webpack错误

时间:2017-10-16 02:28:46

标签: reactjs firebase webpack firebase-hosting

当我使用 webpack-dev-server时,一切正常 ..但是当我构建并尝试使用firebase提供文件时,我收到控制台错误 ..

node-static.js:1 Uncaught TypeError: Cannot read property 'call' of undefined
    at n (node-static.js:1)
    at Object.Q/WI (main.cad020560d8befcb40ce.js:1)
    at n (node-static.js:1)
    at Object.0 (main.cad020560d8befcb40ce.js:1)
    at n (node-static.js:1)
    at window.webpackJsonp (node-static.js:1)
    at main.cad020560d8befcb40ce.js:1

在我的网页中,我有..

// webpack.prod.js
const PUBLIC_PATH = '/'; 
module.exports = merge(common, {
  devtool: false,
  entry: ['babel-polyfill', './ui/index.jsx'],
  output: {
    path: resolve('dist'),
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].chunk.js',
    publicPath: PUBLIC_PATH,
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [{
          loader: 'css-loader',
          options: {
            importLoaders: 1,
            minimize: true,
            sourceMap: false,
            localIdentName: '[name]__[local]--[hash:base64:5]',
          },
        },
        ],
      }),
    },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new ExtractTextPlugin({ filename: '[name].[hash].css', allChunks: true }),
    new CompressionPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.(js|html)$/,
      threshold: 10240,
      minRatio: 0.8,
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      beautify: false,
      comments: false,
      parallel: {
        cache: true,
        workers: 2,
      },
      compress: {
        warnings: false,
        drop_console: true,
        screw_ie8: true,
      },
      mangle: {
        except: ['$', 'webpackJsonp'],
        screw_ie8: true,
        keep_fnames: true,
      },
      output: { comments: false, screw_ie8: true },
    }),
    new webpack.DefinePlugin({
      __DEVELOPMENT__: false,
      __PRODUCTION__: true,
    }),
  ],
});

和......

// webpack.common.js
const PUBLIC_PATH = '/';
const gitRevisionPlugin = new GitRevisionPlugin();

module.exports = {
  entry: {
    vendor: ['react', 'react-dom', 'jquery', 'semantic-ui-css', 'firebase'],
    sw: './ui/sw.js',
  },
  plugins: [
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development',
    }),
    new webpack.ProvidePlugin({
      Promise: 'imports-loader?this=>global!exports-loader?global.Promise!es6-promise',
      fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
    }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new WebpackPwaManifest({
      name: 'MyProject',
      short_name: 'MyProject',
      start_url: '.',
      display: 'standalone',
      related_applications: [{
        platform: 'web',
        id: 'web',
      }],
      description: 'Test',
      background_color: '#0296d3',
      theme_color: '#0296d3',
      lang: 'pt-BR',
      icons: [{
        src: resolve('./favicon-large.png'),
        sizes: [120, 152, 144, 167, 180, 1024],
        destination: resolve('icons', 'ios'),
        ios: true,
      }, {
        src: resolve('./favicon-large.png'),
        size: 1024,
        destination: resolve('icons', 'ios'),
        ios: 'startup',
      }, {
        src: resolve('./favicon-large.png'),
        sizes: [36, 48, 72, 96, 144, 192, 512],
        destination: resolve('icons', 'android'),
      }],
      prefer_related_applications: false,
    }),
    new SWPrecacheWebpackPlugin({
      cacheId: gitRevisionPlugin.commithash(),
      dontCacheBustUrlsMatching: /\.\w{8}\./,
      filename: 'sw.js',
      minify: true,
      navigateFallback: `${PUBLIC_PATH}index.html`,
      staticFileGlobsIgnorePatterns: [/\.map$/, /manifest\.json$/, /dist\/.*\.html/],
    }),
    new HtmlWebpackPlugin({
      title: 'New Release',
      template: resolve(__dirname, 'ui', 'index.tpl.html'),
      chunksSortMode: 'dependency',
      minify: { collapseWhitespace: true },
    }),
    new FaviconsWebpackPlugin({
      logo: resolve(__dirname, 'favicon.png'),
      persistentCache: true,
      icons: {
        android: false,
        appleIcon: false,
        appleStartup: true,
        coast: false,
        favicons: true,
        firefox: true,
        opengraph: false,
        twitter: false,
        yandex: false,
        windows: false,
      },
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity,
      filename: '[name].[hash].js',
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'node-static',
      filename: 'node-static.js',
      minChunks(module) {
        const context = module.context;
        return context && context.indexOf('node_modules') >= 0;
      },
    }),
    new webpack.optimize.CommonsChunkPlugin({
      async: 'used-twice',
      minChunks(module, count) {
        return count >= 2;
      },
    }),
    new webpack.HashedModuleIdsPlugin(),
  ],
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      assets: resolve(__dirname, 'ui', 'assets'),
      components: resolve(__dirname, 'ui', 'components'),
      api$: resolve(__dirname, 'ui', 'api.js'),
      store: resolve(__dirname, 'ui', 'store'),
    },
  },
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /(node_modules|dist)/,
      enforce: 'pre',
      use: { loader: 'eslint-loader' },
    }, {
      test: /\.(html)$/,
      use: { loader: 'file-loader' },
      exclude: [resolve(__dirname, 'ui', 'index.tpl.html')],
    }, {
      test: /\.(js|jsx)$/,
      use: {
        loader: 'babel-loader',
        query: {
          cacheDirectory: true, // important for performance
        },
      },
      include: [
        resolve(__dirname, 'ui'), // important for performance!
      ],
    }, {
      test: /\.(eot|woff|woff2|ttf|svg)$/,
      use: {
        loader: 'file-loader',
        query: { limit: 30000, name: '[name].[hash:8].[ext]', outputPath: 'assets/fonts/' },
      },
    }, {
      test: /\.(gif|png|jpe?g|svg)$/i,
      loaders: [
        {
          loader: 'file-loader',
          query: { outputPath: 'assets/images/' },
        },
        {
          loader: 'image-webpack-loader',
          options: {
            query: {
              progressive: true,
              pngquant: { quality: '65-90', speed: 4 },
              mozjpeg: { progressive: true },
              gifsicle: { interlaced: true },
              optipng: { optimizationLevel: 7 },
            },
          },
        },
      ],
    },
    ],
  },
};

并建立...

NODE_ENV=production webpack -p --config webpack.prod.js && firebase serve

0 个答案:

没有答案