Gulp 和 webpack 的 UglifyJs 错误答案

【问题标题】：UglifyJs error with Gulp and webpackGulp 和 webpack 的 UglifyJs 错误
【发布时间】：2017-12-04 10:07:02
【问题描述】：

我目前正在发现模块捆绑器“Webpack”。我正在尝试做一些非常简单的事情：我有一个main.js 条目和一个bundle.js 输出。我使用 babel 来翻译 ES6。

我的 package.json ：

{
  "name": "me",
  "version": "1.0.0",
  "description": "Builder",
  "main": "index.js",
  "scripts": {
    ...
  },
  "author": "me",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.5.2",
    "babel-preset-es2015": "^6.24.1",
    "gulp": "^3.9.1",
    "lodash": "^4.17.4",
    "webpack": "^3.0.0",
    "webpack-stream": "^3.2.0"
  },
  "dependencies": {
    "jquery": "^3.2.1"
  }
}

Webpack.config.js：

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: path.resolve(__dirname, 'js/main.js'),
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin()
    ]
}

当我在 CLI 中提示 webpack 时，它运行良好，在 dist 文件夹中创建了一个缩小的 bundle.js 文件。

现在，我想和 Gulp 结合

这是我的gulpfile.js：

var gulp = require('gulp');
var webpackS = require('webpack-stream');

gulp.task('default', function() {

  return gulp.src('./app/js/main.js')
    .pipe(webpackS( require('./app/webpack.config.js') ))
    .pipe(gulp.dest('./app/dist/'));

});

当我在 CLI 中输入 gulp 时，出现此错误：

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
Error: bundle.js from UglifyJs
Unexpected token: name (_) [bundle.js:47,8]

但是，当我从 webpack.config.js 中删除行 new webpack.optimize.UglifyJsPlugin() 并在 CLI 中提示 gulp 时，它可以完美运行！

我重新安装了所有的 npm 包，但问题仍然存在。

有人有想法吗？

【问题讨论】：

标签： javascript webpack gulp

【解决方案1】：

如何运行 Webpack 配置？我假设webpack path-to-config/webpack.config.js?

你的配置中有new webpack.optimize.UglifyJsPlugin()，所以通过使用webpack -p 执行生产模式，你会得到一个错误，因为UglifyJsPlugin 被执行了两次。我猜你的 Gulp 设置也会发生同样的情况。

但是，错误消息指向未定义的“_”，这可能与 lodash 有关。可能 Gulp 无法解决导入问题？

但是，我不会混合使用 Gulp 和 Webpack。请参阅此处的讨论：Gulp + Webpack or JUST Webpack? 还有一个在 gulp 任务中使用 Webpack 的示例。

【讨论】：

我通过 'webpack' 运行 webpack 配置，当我使用 'webpack' 运行时，我没有得到任何错误，它只是使用 gulp。我删除了 lodash 导入，但现在我收到错误消息：“$”未为 jquery 定义。
尝试通过plugins: [ new webpack.ProvidePlugin({$: "jquery", jQuery: "jquery", "window.jQuery": "jquery'", "window.$": "jquery"}) ]导入jQuery

【解决方案2】：

我建议你不要混用webpack和gulp，只需在运行 webpack 的 package.json#scripts 中创建一个 script ，然后如果您仍想在 gulp 任务中执行 webpack，您可以这样做：

var exec = require('child_process').exec;

gulp.task('runWebpack', function (callback) {
  exec('npm run webpack', callback);
})

【讨论】：