Webpack如何在生产模式下捆绑？

问题描述：

我正试图通过Gulp将我的React应用程序与Webpack进行捆绑。在捆绑之后，在Chrome中，“React Development Tools”工具栏呈红色，并告诉我“此页面正在使用React的开发版本”。如何使用生产版本进行捆绑？Webpack如何在生产模式下捆绑？

从的package.json：

"gulp": "^3.9.1", 
"gulp-webpack": "^1.5.0", 
"react": "^15.6.1", 
"uglifyjs-webpack-plugin": "^0.4.6", 
"webpack": "^2.6.1"

下面是一口命令：

var gulp = require('gulp'); 
var webpack = require('gulp-webpack'); 
var webpackConfig = require('./webpack.config.js'); 

gulp.task('webpack', function(){ 
    return gulp.src('public_html/app/back/js/all.jsx') 
    .pipe(webpack(webpackConfig)) 
    .pipe(gulp.dest('dist/app/back/js')); 
});

这里是我的webpack.config.js：

const webpack = require('webpack'); 

module.exports = { 
    entry: './public_html/app/back/js/all.jsx', 
    output: { 
    path: `${__dirname}dist/app/back/js`, 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'babel', 
     exclude: /node_modules/, 
     query: { 
      presets: ['react', 'es2015'] 
     } 
     }, 
     { 
     test: /\.scss$/, 
     exclude: /node_modules/, 
     loader: 'style-loader!css-loader!sass-loader' 
     }, 
     { 
     test: /\.css/, 
     loader: 'style-loader!css-loader' 
     } 
    ], 
    }, 
    plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env': { 
     'NODE_ENV': JSON.stringify('production') 
     } 
    }) 
    ], 
};

谢谢。

答

在你的WebPack代码的插件数组，你需要添加以下

new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }), 
new webpack.optimize.UglifyJsPlugin({ 
    beautify: false, 
    mangle: { 
    screw_ie8: true, 
    keep_fnames: true 
    }, 
    compress: { 
    screw_ie8: true, 
    }, 
    comments: false, 
}),

谢谢你，但没有奏效。 React工具栏仍然为红色并显示相同的消息。控制台说：'警告：它看起来像你正在使用React的开发版本的缩小副本。将React应用程序部署到生产时，请确保使用跳过开发警告的生产构建，并且速度更快。有关更多详细信息，请参阅_facebook-link_。它改变了一些东西，因为吞吐量输出已经改变（“条件总是错误的”，“丢失无法访问的代码”等）。还有其他建议吗？ –

你是否在你的webpack脚本中使用了''-p'''标志？ –

我正在通过gulp（不是npm）运行webpack ...我会在哪里放置'-p'？ –

Webpack如何在生产模式下捆绑？

相关推荐