javascript - webpack 是否使 ES6 模块兼容 ES5 浏览器？

Question

如果我在 JS 文件中使用 ES6 导入，例如:

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

webpack 将其转换为:

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

<小时/>

这是否意味着我可以使用 ES6 模块并且由于 webpack 的转换它们将也可以在不支持的旧浏览器中工作支持ES6模块吗？

如果是:这个转换 webpack 和那个 babel 之间的区别是什么？ babel 的转换被描述为这里: https://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/

在旧版浏览器中，关于ES6模块兼容性，使用 babel 或 webpack 的优点/缺点是什么？

<小时/>

我使用的是 webpack 版本 4.10.2，这是我的 webpack 配置:

var path = require('path');

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

Answer 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?

这是 Webpack 的目的之一。

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

Webpack 是一个 bundler 。 Babel 是一个转译器。它们应该一起使用。 Babel transform-es2015-modules-commonjs 转换将 ES 模块转换为 CommonJS 模块。 Node.js 支持 CommonJS 模块，但浏览器不支持。

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

优点是可以在旧版浏览器中使用 ES 模块。缺点是 Webpack 可能会引入限制，例如如何处理循环依赖项。