Search code examples
webpack-2babeljs

Webpack build project with ...argumetns even if babel has perset es2015


As you can read the topic of the post. I am using webpack to build project by berset of es2015. Every file is "compiled" correctly, but, as I noticed, webpack add some own variables. I have sow it now because I checked my project in IE11, and it throw the syntax error on (output file):

var Utils = {
//...
 warn: function () {
    if (window.console && 'function' === typeof window.console.warn)
      window.console.warn(...arguments);
  },

  warnOnce: function(msg) {
    if (!pastWarnings[msg]) {
      pastWarnings[msg] = true;
      this.warn(...arguments);
    }
  },
//...
}

The problem occur because of ...arguments.

Why webpack do it this way?

My webpack config:

module.exports = {
entry: ['babel-polyfill', path.resolve(__dirname + '/src/app.js')],

output: {
    path: __dirname + '/bin',
    filename: 'app.bundle.js',
},
resolve: {
    extensions: ['.js'],
    modules: ['node_modules'],
    alias: {/*...*/}
},
devtool: "source-map",
target: 'web',
node: {
    fs: "empty"
},
plugins: [
    new webpack.ProvidePlugin({/*...*/})
],
module: {
    loaders: [{
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{
            loader: 'babel-loader',
            options: {
                presets: 'es2015',
            },
        }]
    }, {
        test: /\.scss$/,
        use: [/*...*/]
    }]
}
};

Solution

  • It appears that I import ParsleyJs by import statement. That cause webpack to take Parsley as it is. I just add this dependency to my webpack config file and webpack compile it to es5 correctly.