UglifyJs error with Gulp and webpack

Question

I am currently discovering the module bundler "Webpack". I am trying to do something quite easy : I have a main.js entry and a bundle.js output. I use babel in order to translate in ES6.

My 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()
    ]
}

When I prompt webpack in the CLI, it works pretty well, a bundle.js file which is minified is created in the dist folder.

Now, I want to combine with Gulp

Here is my 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/'));

});

When I enter gulp in the CLI, I have this error :

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

However, when I remove the line new webpack.optimize.UglifyJsPlugin() from webpack.config.js and prompt gulp in the CLI it works perfectly !

I reinstalled all the npm packages but the problem is still here.

Does anybody have an idea ?

Matthias Sommer · Answer 1 · 2017-07-03T10:00:14.507

0

How do you run the Webpack config? I assume by webpack path-to-config/webpack.config.js?

You have new webpack.optimize.UglifyJsPlugin() in your config, so by using webpack -p which executes the production mode, you get an error because UglifyJsPlugin is executed twice. I guess the same happens with your Gulp setup.

However, the error message points to "_" not defined, which could be related to lodash. Maybe the import can't be resolved by Gulp?

However, I would not mix Gulp and Webpack. See the discussion here: Gulp + Webpack or JUST Webpack? There is also an example using Webpack from within a gulp task.

edited Jul 03 '17 at 10:00

answered Jun 30 '17 at 16:30

Matthias Sommer

1,070
13
28

I run the webpack config by 'webpack' and I **don't** get any errors when I run with 'webpack', it is only with gulp. I deleted the lodash import but now I get the error message : "$" not defined for jquery. – Seabon Jul 03 '17 at 14:17
Try importing jQuery by `plugins: [ new webpack.ProvidePlugin({$: "jquery", jQuery: "jquery", "window.jQuery": "jquery'", "window.$": "jquery"}) ]` – Matthias Sommer Jul 03 '17 at 15:20

score 0 · Answer 2 · answered Jun 30 '17 at 16:39

I would like to suggest you to don't mix webpack and gulp, just create a script inside your package.json#scripts which runs webpack and then if you still want to exec webpack inside a gulp task you can do:

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

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

UglifyJs error with Gulp and webpack

2 Answers2