这是一个旧的项目,很快会得到一些更新,但在此之前,我需要使用原始的网页配置。奇怪的是,自上一次发布以来,这一点从未被触及过,但存在一个阻塞问题。
当捆绑生产并在浏览器中运行时,我收到以下消息:
未捕获错误:发生缩小的异常;使用未缩小的dev
完整错误消息和其他有用信息的环境
警告。
似乎Webpack认为我是在开发模式下运行的,但使用的是缩小的React文件,因此产生了这样的消息。我跟踪了
process.env.NODE_ENV
他们都记录了
"production"
。
这是捆绑文件的生成命令:
node --max_old_space_size=3072 node_modules/.bin/webpack --verbose --colors --display-error-details --config webpack/prod.config.js
和网页包配置:
require('babel/polyfill');
// Webpack config for creating the production bundle.
const path = require('path');
const webpack = require('webpack');
const strip = require('strip-loader');
const projectRootPath = path.resolve(__dirname, '../');
const assetsPath = path.resolve(projectRootPath, './static/dist');
const webpackPostcssTools = require('webpack-postcss-tools');
const map = webpackPostcssTools.makeVarMap('./src/theme/index.css');
// https://github.com/halt-hammerzeit/webpack-isomorphic-tools
const WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
const webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));
module.exports = {
devtool: 'source-map',
context: path.resolve(__dirname, '..'),
entry: {
'main': [
'./src/client.js'
]
},
output: {
path: assetsPath,
filename: '[name]-[chunkhash].js',
chunkFilename: '[name]-[chunkhash].js',
publicPath: '/dist/'
},
module: {
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: [strip.loader('debug'), 'babel']},
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.css$/, loaders: ['style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss'] },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10&mimetype=application/font-woff' },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10&mimetype=application/font-woff' },
{ test: /\.svg$/, loader: 'svg-inline' },
{ test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10' },
{ test: /\.modernizrrc$/, loader: 'modernizr' }
]
},
progress: true,
resolve: {
alias: {
font: __dirname + '/../src/fonts',
images: __dirname + '/../static/images',
modernizr$: path.resolve(__dirname, '../.modernizrrc')
},
modulesDirectories: [
'src',
'node_modules'
],
extensions: ['', '.json', '.js', '.jsx']
},
postcss: () => {
return [
require('autoprefixer')({
browsers: ['last 3 versions']
}),
require('precss'),
require('postcss-custom-media')({
extensions: map.media
})
];
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'Scribe': 'scribe-editor'
}),
new webpack.DefinePlugin({
__CLIENT__: true,
__SERVER__: false,
__DEVELOPMENT__: false,
__DEVTOOLS__: false
}),
// ignore dev config
new webpack.IgnorePlugin(/\.\/dev/, /\/config$/),
// set global vars
new webpack.DefinePlugin({
'process.env': {
// Useful to reduce the size of client-side libraries, e.g. react
NODE_ENV: JSON.stringify('production'),
API_HOST: JSON.stringify(process.env.API_HOST || 'api'),
WEB_HOST: JSON.stringify(process.env.WEB_HOST || 'https://www.website.com')
}
}),
// optimizations
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
webpackIsomorphicToolsPlugin
]
};
我似乎找不到问题。有什么看起来可疑的东西跳出来吗?