robin-a-meade/.gitignore

## .gitignore
/main.js
/node_modules
/package-lock.json

## README.md

      
    Raw
  

              README.md
            
          
    Webpack detects ESM modules automatically

Read the documentation

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" to package.json to force all files below to be considered ECMAScript modules.
Add "type": "commonjs" to package.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


Run this example


Create a temporary directory and cd into it
Clone the gist
Run the webpack build

cd "$(mktemp -d)"
git clone git@gist.github.com: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!"
Closing thoughts

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" to package.json.


## hello.js
export default function hello() { console.log("Hello, World!"); }

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! Site Title</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <script src="main.js"></script>
  </body>
</html>

## index.js
import f from "./hello.js";
f();

## package.json
{
  "name": "blahblah",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode development --entry ./index.js -o ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hello World! Site Title</title>
	</head>
	<body>
	<h1>Hello World!</h1>
	<script src="main.js"></script>
	</body>
	</html>
	{
	"name": "blahblah",
	"version": "1.0.0",
	"main": "index.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"build": "webpack --mode development --entry ./index.js -o ."
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"description": "",
	"devDependencies": {
	"webpack": "^5.74.0",
	"webpack-cli": "^4.10.0"
	}
	}