diff --git a/src/content/guides/getting-started.mdx b/src/content/guides/getting-started.mdx index 5f0d559f1a1d..2d4344c771d1 100644 --- a/src/content/guides/getting-started.mdx +++ b/src/content/guides/getting-started.mdx @@ -27,6 +27,7 @@ contributors: - d3lm - snitin315 - Etheryen + - RajeevPullat --- Webpack is used to compile JavaScript modules. Once [installed](/guides/installation), you can interact with webpack either from its [CLI](/api/cli) or [API](/api/node). If you're still new to webpack, please read through the [core concepts](/concepts) and [this comparison](/comparison) to learn why you might use it over the other tools that are out in the community. @@ -111,6 +112,7 @@ T> If you want to learn more about the inner workings of `package.json`, then we "description": "", - "main": "index.js", + "private": true, ++ "type": "module", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, @@ -134,6 +136,8 @@ There are problems with managing JavaScript projects this way: Let's use webpack to manage these scripts instead. +T> The `type: module` in the package.json is required to enable ES module import statements in .js files by telling Node.js to treat them as ES modules instead of the default CommonJS modules. + ## Creating a Bundle First we'll tweak our directory structure slightly, separating the "source" code (`./src`) from our "distribution" code (`./dist`). The "source" code is the code that we'll write and edit. The "distribution" code is the minimized and optimized `output` of our build process that will eventually be loaded in the browser. Tweak the directory structure as follows: