https://webpack.js.org/guides/ecma-script-modules/
Takeaways:
- WebPack automatically detects the modules system being used
- But you are still free to use the Node.js way of explicitly specifying the module type through the following mechanisms:
- Add
"type": "module"
topackage.json
to force all files below to be considered ECMAScript modules. - Add
"type": "commonjs"
topackage.json
to force all files below to be considered CommonJS modules. - Use
.mjs
extension to force them to be ESM modules - Use
.cjs
extension to force them to be CommonJS modules
- Add
- Create a temporary directory and
cd
into it - Clone the gist
- Run the webpack build
cd "$(mktemp -d)"
git clone [email protected]:6d1a94b39f085fcece0318863a2f0a75.git .
npm install
npm run build
firefox index.html
Open your browser's developer tools and look at the console output. You should see "Hello, World!"
Webpack makes it easy to use ESM modules.
- We didn't need to add babel to our project to transpile ESM modules to CommonJS modules.
- We didn't need to change the file extensions from
.js
to.mjs
. - We didn't need to add
"type": "module"
topackage.json
.