如何使用 gulp 缩小 webpack 输出？答案

【问题标题】：How to minify webpack output using gulp?如何使用 gulp 缩小 webpack 输出？
【发布时间】：2016-03-16 22:55:11
【问题描述】：

我有这个任务：

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 输出？

【问题讨论】：

标签： gulp webpack minify uglifyjs gulp-uglify

【解决方案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']
    }
  })
  ],

【讨论】：

只是想我会评论说 webpack 比 gulp-minify 慢了大约 25%。实际上，我将 minify 从 webpack 转移到 gulp 以帮助提高构建性能。
@ahskaus 你是怎么做到的？
@x29a 使用jsminify插件对webpack输出目录下的js文件进行压缩。
@ahskaus 我将添加到 x29a 的问题中：您是否有一个解决方案仍然使您能够使用从缩小版本映射到原始代码之前的源映射，例如使用 webpack 等等？