Using webpack without transforming es6 to es5 code

Question

I have a project that is just a few months old, and I decided to write it in ES6 to learn the new system. (Which I like a lot). The project is a sophisticated WebGL renderer.

Initially I simply used es6 in the browser, (not using the modules feature), and simply used lots of import statements in my HTML(ugly). This became unmanagable as the number of classes grew.

Now I am learning webpack and babel for the first time. My goal is to webpack all the modules together in either es5 or es6 format.

I have used webpack to transform my code to a single es5 (CommonJS) module. All functionality remains the same. Yay!

However, performance has been reduced quite significantly in some cases. Some of my code is running at half the speed now that it has been transformed to es5. (this goes against the data I see in this page https://kpdecker.github.io/six-speed/).

I would like to test using Webpack without transforming es6 -> es5. Essentially just leveraging webpacks ability to bundle my modules into a single file.

I am totally new to webpack, and I've been trying to mess with the way babel transforms my code, but can't figure out how to simply disable most of the transforms. The only thing I want transformed is the module import/exports.

Can anyone help me figure this out?

P.S. I do think my project points to es6 being much faster in some real world use cases than es5, and helps justify my decision to go with es6 from the beginning.

Cherise

Answer 1

Rather than using a "preset" set of plugins (like "es2015") just use the transform-es2015-modules-commonjs plugin by itself.

Here's an example webpack config, but you could also do this in .babelrc:

// webpack.config.js
{
  module: {
    loaders: [
      {
        test: /\.js$/i,
        loader: 'babel',
        query: {
          plugins: ["transform-es2015-modules-commonjs"]
        }
      }
    ]
  }
}

That will transform import statements into require statements and export statements into module.exports = value statements ... and it won't do anything else. You can add in other transforms as you need them and everything else will be passed through as authored.

Cushing

Thanks BTW. I got very distracted, but this was exactly what I needed! – Cherise

Answer 2

I guess you use babel-loader? Simply remove the babel loader on .js files in your Webpack configuration:

module: {
  loaders: [
    // Remove this:
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel',
      query: {
        presets: ['es2015']
      }
    }
  ]
}

Demisec

I tried simply removing the babel loader, but then I get the following error : ERROR in ./src/Sapphire.js Module parse failed: D:\Projects\MatterMachine\SapphireClient\node_modules\eslint-loader\index.js!D:\Projects\MatterMachine\SapphireClient\src\Sapphire.js Line 3: Unexpected token You may need an appropriate loader to handle this file type. Sorry, I should have included that in my question. – Cherise

Answer 3

If you just want to bundle you js files into one then you don't need to use webpack. Webpack is much more, infect you use webpack if you want to do compiling, module loading, code splitting and mush more. For just minify without doing any these steps you can use simple tools like gulp. How ever if you still want to go with webpack then just don't compile your js file, don't use any loader.

Coated