From ebcf71b4ca64f4a0303eb9fdc09f0bd7201569a5 Mon Sep 17 00:00:00 2001 From: Rajeev Pullat Date: Sun, 12 Jan 2025 00:30:38 +0530 Subject: [PATCH 1/2] docs: update getting started guide to correct webpack config file extension to support CJS syntax The docs used import statement in index.js which requires setting `type: "module"`. There is a PR for the same `https://github.com/webpack/webpack.js.org/pull/7516`. This is to correct the webpack config file. The commonjs code won't work in *.js extension. So its changed to *.cjs. --- src/content/guides/getting-started.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/guides/getting-started.mdx b/src/content/guides/getting-started.mdx index 5f0d559f1a1d..0669e4b6f6fd 100644 --- a/src/content/guides/getting-started.mdx +++ b/src/content/guides/getting-started.mdx @@ -237,14 +237,14 @@ As of version 4, webpack doesn't require any configuration, but most projects wi webpack-demo |- package.json |- package-lock.json -+ |- webpack.config.js ++ |- webpack.config.cjs |- /dist |- index.html |- /src |- index.js ``` -**webpack.config.js** +**webpack.config.cjs** ```javascript const path = require('path'); @@ -261,7 +261,7 @@ module.exports = { Now, let's run the build again but instead using our new configuration file: ```bash -$ npx webpack --config webpack.config.js +$ npx webpack --config webpack.config.cjs [webpack-cli] Compilation finished asset main.js 69.3 KiB [compared for emit] [minimized] (name: main) 1 related asset runtime modules 1000 bytes 5 modules @@ -271,7 +271,7 @@ cacheable modules 530 KiB webpack 5.4.0 compiled successfully in 1934 ms ``` -T> If a `webpack.config.js` is present, the `webpack` command picks it up by default. We use the `--config` option here only to show that you can pass a configuration of any name. This will be useful for more complex configurations that need to be split into multiple files. +T> By default, if you run the webpack command without specifying a configuration file, Webpack will look for certain default filenames. These typically include: `webpack.config.js` (for CommonJS format in JavaScript), `webpack.config.cjs` (for explicit CommonJS format) or `webpack.config.mjs` (for ES Modules). We use the `--config` option here only to show that you can pass a configuration of any name. This will be useful for more complex configurations that need to be split into multiple files. A configuration file allows far more flexibility than CLI usage. We can specify loader rules, plugins, resolve options and many other enhancements this way. See the [configuration documentation](/configuration) to learn more. @@ -335,7 +335,7 @@ Now that you have a basic build together you should move on to the next guide [` webpack-demo |- package.json |- package-lock.json -|- webpack.config.js +|- webpack.config.cjs |- /dist |- main.js |- index.html From 1b303fbbad0d190e3ba28427bc809df376257517 Mon Sep 17 00:00:00 2001 From: Rajeev Pullat Date: Sun, 12 Jan 2025 00:41:43 +0530 Subject: [PATCH 2/2] chore: Added to contributor list --- src/content/guides/getting-started.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/guides/getting-started.mdx b/src/content/guides/getting-started.mdx index 0669e4b6f6fd..c5301dff26dd 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.