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/

在较旧的浏览器中， 使用babel或webpack的ES6模块兼容性有哪些优缺点 ？

---

我正在使用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可能会引入限制，例如如何处理循环依赖性。