为什么要在webpack conf文件中添加babel-loader？

Question

I am new to webpack and have seen some examples as following:

module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      // ....

Why is this necessary since webpack auto transpiles es6 to es5?

---

Edit: Ok, it DOES NOT transpile automatically unless instructed to do so.

Answer 1

Why is this necessary since webpack auto transpiles es6 to es5?

Webpack does not auto-transpile ES6 to ES5. It is simply a build tool. It does nothing but execute the plugins & loaders you tell it to.

But the es6 code I wrote get transpiled to es5 even without this "babel" rule

I don't see it transpiling ES6 to ES5.

The first example I looked for in your code was the conversion of let to var in the bundled code since this is probably the most commonly used ES6 feature.

With babel-loader, let gets converted to var (and some other fancy maneuvering). Without, it remains let .

To explore this, I commented out UglifyJS so the bundle was readable and ctrl+f ed the file. You should be able to see this same behavior.

If you're expecting import to be converted to require , this won't happen as webpack just reads the file and loads it into the bundle. So, no require & no import appear in the bundle. This isn't transpilation, though. It's just a function of how webpack's bundling process works (searching for & injecting dependencies into the bundle).

Bonus points:

I would recommend adding your dist directory to .gitignore . Typically, you don't want your bundled code version controlled. You should rely on your build tools to handle this (you can add webpack to your package.json 's postinstall if you want to simplify the installation for consumers of your project).

In hindsight, I realize you probably only added the dist directory because I asked to see the bundled code. Sorry! :p But I'll leave this here in case it helps someone else in the future.