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 模块吗？

如果是：这个 transformation 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

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

这是 Webpack 的目的之一。

这个转换 webpack 做的和一个 babel 做的有什么区别？

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

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

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