0
웹 응용 프로그램에서 webpack + react + redux를 사용하고 있습니다. 그리고 dev 웹 서버를 시작하려면 webpack-dev-server을 사용하고 있습니다. 내가 브라우저 내 응용 프로그램에 액세스 할 때 콘솔에 오류 메시지가 아래에 있습니다 :왜 webpack에서 약 NODE_ENV에 대한 오류가 발생합니까?
Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster.
You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify to ensure you have the correct code for your production build.
아래는 내 webpack.config.js 파일입니다. 나는 생산 모드를 지정하지 않았는데, 왜 webpack이 나에게 그런 경고 메시지를 주는지? 어떻게 내가 그걸 없앨 수 있니?
const webpack = require('webpack');
const path = require('path');
const NpmInstallPlugin = require('npm-install-webpack-plugin');
const WebpackShellPlugin = require('webpack-shell-plugin');
var CompressionPlugin = require("compression-webpack-plugin");
const PATHS = {
react: path.join(__dirname, 'node_modules/react/dist/react.min.js'),
app: path.join(__dirname, 'src'),
build: path.join(__dirname, './dist')
};
module.exports = {
entry: {
app: './app/index.jsx',
android: './app/utils/platform_android.js',
ios: './app/utils/platform_ios.js',
web: './app/utils/platform_web.js',
vendor: [
'axios',
'react',
'react-dom',
'react-redux',
'react-router',
'react-router-redux',
'redux',
'redux-thunk',
'react-alert',
'sha1',
'moment',
'nuka-carousel',
'react-cookie',
'material-ui',
'react-spinkit',
'react-tap-event-plugin',
'react-tappable',
],
},
output: {
path: PATHS.build,
filename: '[name].bundle.js',
},
watch: true,
devtool: 'source-map',
relativeUrls: true,
resolve: {
extensions: ['', '.js', '.jsx', '.css', '.less'],
modulesDirectories: ['node_modules'],
alias: {
normalize_css: __dirname + '/node_modules/normalize.css/normalize.css',
}
},
module: {
preLoaders: [
{
test: /\.js$/,
loader: "source-map-loader"
},
// {
// test: /\.js$/,
// exclude: /node_modules/,
// loader: 'jshint-loader'
// }
],
loaders: [
{
test: /\.html$/,
loader: 'file?name=[name].[ext]',
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader?presets=es2015',
},
{
test: /\.less$/,
loader: "style!css!less",
},
{test: /\.css$/, loader: 'style-loader!css-loader'},
{test: /\.png$/, loader: "url-loader?limit=100000"},
{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['babel-loader?presets=es2015']
},
{
test: /\.svg$/,
loader: 'svg-sprite',
include: /public\/icons/
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
output: {
comments: false,
},
}),
new NpmInstallPlugin({
save: true // --save
}),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.html$/,
threshold: 10240,
minRatio: 0.8
}),
new webpack.optimize.CommonsChunkPlugin(/* chunkName= */["vendor"], /* filename= */"[name].bundle.js", Infinity),
],
devServer: {
colors: true,
contentBase: __dirname,
historyApiFallback: true,
hot: true,
inline: true,
port: 9093,
progress: true,
stats: {
cached: false
}
}
}
EDIT1 : 그럼 난 여전히 같은 경고를 받았습니다
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("development")
}
})
:
react: path.join(__dirname, 'node_modules/react/dist/react.min.js'),
그런 다음 아래와 같이 개발에 NODE_ENV 업데이트 :
나는이 줄을 제거 .
warning.js:14You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.
즉, 두 개의 webpack 구성 파일을 정의해야합니까? 하나는 dev 모드 용이고, 하나는 생산 모드 용입니까? 그리고이 두 파일의 대부분은 다른 몇 줄의 파일과 동일합니다. 맞습니까? –
반응 경로를 설정 파일에서 아무 것도 사용하지 않아서 제거한 것처럼 보입니다. 내 게시물을 편집했지만 여전히 같은 오류가 발생했습니다. –
@ ZhaoYi 잘 2 개의 Webpack 파일은 꽤 일반적인 연습이지만, 코드를 포함하여 모든 것을 축소시키는 비 확장 버전과 UglifyJS 웹팩 플러그인을 사용할 수 있습니다. 두 번째 의견에 관해서 : 오류가 동일합니까? 반응에 대해 ??? – smnbbrv