how babel-loader deal with ES6 import?

[Fishfaceeast]

Does babel-loader just leave the import tasks to webpack? Any difference between babel-loader in webpack and the babel tool alone in node CLI?

[smalllong]

I met the same question. When I use dynamic import in babel-loader, error happened: "unexpected token" at the import().

[smalllong]

I got the answer. https://babeljs.io/docs/plugins/preset-env/#optionsmodules

[gimmi]

Ok, the default seems to be commonjs so babel will transform to ES6 import and let webpack deal with commonjs modules.

Isn't this sub-optimal for Webpack 2 tree shaking feature?

See also: https://medium.com/@johnstew/webpack-tree-shaking-20914b7a9ca5

[michael-ciniawsky]

@gimmi With CJS Modules there isn't any 'tree-shaking' :). You need to explicitly disable module transpilation via babel when using webpack, since webpack supports ESM and import() 'natively' and needs ESM && import() for scope hoisting and 'tree-shaking'.

babelrc

{
  "presets": [
    [
      "env", {
        "targets": {
           // specify supported browsers (ES2015+ Features to transpile)
          "browsers": { "chrome": 60 } 
         },
        // no module transpilation to CJS (!important)
        "modules": false
      }
    ],
    // if you use React (JSX)
    [ "react" ]
  ],
  "plugins": [
    // Syntax support only so babel doesn't complain, no transpilation
    "syntax-dynamic-import"
  ],
  "env": {
    "test": {
      // Only for testing components (NODE_ENV = 'test') in NodeJS, which needs CJS to work
      "plugins": [ "transform-es2015-modules-commonjs" ]
    }
  }
}

[DrewML]

Closing since this has been answered. #477, #521, and #515 can be used to discuss making this experience less confusing moving forward.