当我使用 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