我是React的新手,我使用webpack作为模块捆绑器和npm构建了一个客户端反应应用程序。它在Webpack devServer的开发中运行顺畅。在制作中,我使用express作为服务器。在localhost:8080运行时,它显示正常,但我收到这些警告。我设置了NODE_ENV ='production',但仍然是相同的警告。
这是我的生产配置文件
production.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const config ={
devtool: 'cheap-module-source-map',
entry: [
'react-hot-loader/patch',
'./client/main.js'
],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.bundle.js',
publicPath:'/'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
//query: { sourceMap: false },
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader'
}
]
})
},
{
test: /\.jsx?$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpe?g|gif|svg|ico|\.woff$|\.ttf$|\.wav$|\.mp3$)$/i,
use: ['file-loader?name=img/[name].[ext]',
'image-webpack-loader']
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader?name=fonts/[name].[ext]'
}
]
},
plugins: [
//index.html custom template
new HtmlWebpackPlugin({
title: 'Index',
template: './index.html'
}),
new webpack.EnvironmentPlugin(
{
'process.env':
{
NODE_ENV: JSON.stringify('production') }
}
),
//extract css files
new ExtractTextPlugin({filename:"styles.css",disable:false,allChunks:true}),
new UglifyJsPlugin({
sourceMap: false,
mangle: true,
beautify:false,
compress: {
warnings: false, // Suppress uglification warnings
pure_getters: true,
unsafe: true,
unsafe_comps: true,
screw_ie8: true
},
output: {
comments: false
}
})
]
};
module.exports=config
的package.json
{
"name": "react-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"webpack": "webpack",
"dev": "webpack-dev-server --colors",
"prod": "npm run build && node deploy.js",
"build": "webpack --config production.config.js --progress --colors"
}
//依赖项被省略 }
答案 0 :(得分:3)
尝试使用此软件包:https://www.npmjs.com/package/cross-env
我认为在Windows命令提示中设置NODE_ENV = production会出现问题。
用法示例:
构建脚本:
cross-env NODE_ENV=production webpack
webpack.config.js:
const webpack = require('webpack');
const env = process.env.NODE_ENV || 'production';
//...
plugins = [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(env)
}
})
]
//...
希望有所帮助。