如何使用 gulp 缩小 webpack 输出？

Question

我有这个任务：

gulp.task('js', function() {
  var webpackConfig = extend({}, require('./webpack.config.dev.js'), {
    devtool: "source-map",
  });
  return gulp.src(config.paths.mainJs)
    //.pipe(beautify({indent: {value: '  '}}))
    .pipe(named())
    .pipe(webpack(webpackConfig))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(through.obj(function (file, enc, cb) {
      // Dont pipe through any source map files as it will be handled
      // by gulp-sourcemaps
      var isSourceMap = /\.map$/.test(file.path);
      if (!isSourceMap) this.push(file);
      cb();
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./deployment/deployment/js'))
    .pipe(uglify())//JS_Parse_Error

前一个管道./deployment/deployment/js/的输出是两个文件：bundle.js和bundle.js.map。所以我认为我的丑化管道是错误的。如何缩小 webpacks 输出？

Answer 1

我所要做的就是修改 gulp 中已引用的 './webpack.config.dev.js` 文件以添加 UglifyJsPlugin：

  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.UglifyJsPlugin({
    mangle: {
        except: ['$super', '$', 'exports', 'require']
    }
  })
  ],

如何使用 gulp 缩小 webpack 输出？

How to minify webpack output using gulp?

gulp

webpack

minify

uglifyjs

gulp-uglify