title: Does webpack make ES6 modules compatible with ES5 browsers?
body: <p>If I use an <strong>ES6 import</strong> in a JS file like:</p>
  
  <pre><code>import { tempates } from "./templates.js";
  </code></pre>
  
  <p><strong>webpack converts</strong> this to something like:</p>
  
  <pre><code>__webpack_require__.r(__webpack_exports__);
  /* harmony import */ var _templates_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./templates.js */ "./static/js/templates.js");
  </code></pre>
  
  <hr>
  
  <p>Does this mean that <strong>I can use ES6 modules</strong> and <strong>due to the transformation of webpack</strong> they will <strong>also work in old browsers</strong> that do not support ES6 modules?</p>
  
  <p>If yes: Whats the <strong>difference between</strong> this <strong>transformation webpack</strong> does and that one <strong>babel</strong> does? The transformation of babel is described e.g. here:
  <a href="https://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/" rel="nofollow noreferrer">https://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/</a></p>
  
  <p>What are the <strong>advantages/disadvantages using babel or webpack</strong> concerning <strong>ES6 module compatibilty</strong> in older browsers?</p>
  
  <hr>
  
  <p>I'm using webpack version 4.10.2 and this is my webpack config:</p>
  
  <pre><code>var path = require('path');
  
  module.exports = {
      mode: 'development',
      entry: './static/js/mainScript.js',
      output: {
          path: path.resolve(__dirname, 'build'),
          filename: 'asterics-grid.bundle.js'
      }
  };
  </code></pre>