Question

我正在尝试通过Gulp将我的React应用程序与Webpack捆绑在一起。捆绑后，在Chrome中使用＆＃34; React开发工具＆＃34;工具栏是红色的并告诉我＆＃34;此页面使用的是React的开发版本。＆＃34;。如何使用生产版本进行捆绑？

来自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"

这是gulp命令：

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')
      }
    })
  ],
};

谢谢。

Answer 1

在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,
}),

Webpack如何捆绑生产模式？

1 个答案: