Does webpack make ES6 modules compatible with ES5

问题:

If I use an ES6 import in a JS file like:

import { tempates } from "./templates.js";

webpack converts this to something like:

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _templates_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./templates.js */ "./static/js/templates.js");

---

Does this mean that I can use ES6 modules and due to the transformation of webpack they will also work in old browsers that do not support ES6 modules?

If yes: Whats the difference between this transformation webpack does and that one babel does? The transformation of babel is described e.g. here: https://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/

What are the advantages/disadvantages using babel or webpack concerning ES6 module compatibilty in older browsers?

---

I'm using webpack version 4.10.2 and this is my webpack config:

var path = require('path');

module.exports = {
    mode: 'development',
    entry: './static/js/mainScript.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'asterics-grid.bundle.js'
    }
};

回答1:

Does this mean that I can use ES6 modules and due to the transformation of webpack they will also work in old browsers that do not support ES6 modules?

This is one of the purposes of Webpack.

Whats the difference between this transformation webpack does and that one babel does?

Webpack is a bundler. Babel is a transpiler. They are supposed to be used together. Babel transform-es2015-modules-commonjs transformation transforms ES modules into CommonJS modules. CommonJS modules are supported in Node.js but not in browsers.

What are the advantages/disadvantages using babel or webpack concerning ES6 module compatibilty in older browsers?

The advantage is that you can use ES modules in older browsers. The disadvantage is that Webpack may introduce limitations like how circular dependencies can be handled.