Dealing with issues at early stages of WebPack set up

Question

I am practicing the setup of a web project with WebPack, and I am meeting several difficulties in the process of configuration at its earliest stage. Here's my process:

1.- The structure of the project

I have a brand new project folder by the name of card-generator-webpack. The structure of that folder is as follows:

    __/ card-generator-webpack
      |__/ src
      |  |__/ assets / img
      |              |__ favicon.jpeg
      |  |__ app.js
      |  |__ index.html
      |  |__ styles.css
      |__ README.md

2.- Initializing WebPack

The first two commands which I run are npm init -y and npm install webpack webpack-cli --save-dev. I do so at the root of my project via Terminal. Once I've done it, the structure of my project looks like so:

    __/ card-generator-webpack
      |__/ (+) node_modules
      |__/ src
      |  |__/ assets / img
      |              |__ favicon.jpeg
      |  |__ app.js
      |  |__ index.html
      |  |__ styles.css
      |__ (+) package-lock.json
      |__ (+) package.json
      |__ README.md

Notice how new files and folders are depicted with a (+) at the beginning of its corresponding lines. Likewise, the removal of files and folders will be depicted with a (-) at the beginning of their corresponding lines.

3.- Meeting the first issue

Probably in a very naive fashion, I go to the package.json of my project and, under scripts, I add "build": "webpack" for this final result:

{
    "name": "card-generator-webpack",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^5.75.0",
        "webpack-cli": "^5.0.1"
    }
} 

But, after running npm run build, I get a quite long error as output on the Terminal. This is it:

ERROR in main
Module not found: Error: Can't resolve './src' in '/Users/AGLAYA/Local Sites/card-generator-webpack'
resolve './src' in '/Users/AGLAYA/Local Sites/card-generator-webpack'
 using description file: /Users/AGLAYA/Local Sites/card-generator-webpack/package.json (relative path: .)
  Field 'browser' doesn't contain a valid alias configuration
  using description file: /Users/AGLAYA/Local Sites/card-generator-webpack/package.json (relative path: ./src)
   no extension
    Field 'browser' doesn't contain a valid alias configuration
    /Users/AGLAYA/Local Sites/card-generator-webpack/src is not a file
   .js
    Field 'browser' doesn't contain a valid alias configuration
    /Users/AGLAYA/Local Sites/card-generator-webpack/src.js doesn't exist
   .json
    Field 'browser' doesn't contain a valid alias configuration
    /Users/AGLAYA/Local Sites/card-generator-webpack/src.json doesn't exist
   .wasm
    Field 'browser' doesn't contain a valid alias configuration
    /Users/AGLAYA/Local Sites/card-generator-webpack/src.wasm doesn't exist
   as directory
    existing directory /Users/AGLAYA/Local Sites/card-generator-webpack/src
     using description file: /Users/AGLAYA/Local Sites/card-generator-webpack/package.json (relative path: ./src)
      using path: /Users/AGLAYA/Local Sites/card-generator-webpack/src/index
       using description file: /Users/AGLAYA/Local Sites/card-generator-webpack/package.json (relative path: ./src/index)
        no extension
         Field 'browser' doesn't contain a valid alias configuration
         /Users/AGLAYA/Local Sites/card-generator-webpack/src/index doesn't exist
        .js
         Field 'browser' doesn't contain a valid alias configuration
         /Users/AGLAYA/Local Sites/card-generator-webpack/src/index.js doesn't exist
        .json
         Field 'browser' doesn't contain a valid alias configuration
         /Users/AGLAYA/Local Sites/card-generator-webpack/src/index.json doesn't exist
        .wasm
         Field 'browser' doesn't contain a valid alias configuration
         /Users/AGLAYA/Local Sites/card-generator-webpack/src/index.wasm doesn't exist

webpack 5.75.0 compiled with 1 error and 1 warning in 503 ms

Now, the only way that I've found to solve all of that in order to get WebPack to create the famous folder dist has been adding the path ./src/app.js to the "build": "webpack" that I've just added before, so that the line ends up reading like this:

"build": "webpack ./src/app.js"

And, finally, once I run npm run build, I do now get the folder dist, so that I my project's structure is now:

    __/ card-generator-webpack
      |__/ (+) dist
      |  |__ (+) main.js
      |__/ node_modules
      |__/ src
      |  |__/ assets / img
      |              |__ favicon.jpeg
      |  |__ app.js
      |  |__ index.html
      |  |__ styles.css
      |__ package-lock.json
      |__ package.json
      |__ README.md

Thus - and to start with - my questions would be:

1. What is that error yielded on the Terminal exactly saying?

2. Why can't that error be solved by changing the "main": "index.js" to "main": "app.js", or to "main": "./src/app.js"?

3. Why the only solution that I've found by myself implies adding an entry point to my "build" script?

4. Is it logical to add an entry point to my "build"?

Finally, according with WebPack's documentation:

We also need to adjust our package.json file in order to make sure we mark our package as private, as well as removing the main entry. This is to prevent an accidental publish of your code.

So...

5. Why does WebPack's documentation read that removing the main entry is necessary?

6. What does WebPack's documentation mean with "accidental publish of your code"?

7. Why could our code be published by accident and how does "private": true help to prevent this from happening?

8. What if I want to willingly publish it? Should I erase or change this "private": true value?

Answer 1

For what it may be worth, and according to what I've kept on researching, the solution to the problem lies in the fact that Webpack

take[s] ./src/index.js as the default!

Source (have a look at this screenshot):

Webpack 4 : ERROR in Entry module not found: Error: Can't resolve './src'

So either the .js file that we want to use as the entry point is called index.js, and it's in the ./src/ path or things blow up.

Now, if we want the entry point to be different from the one taken by WebPack by default, we have two possible solutions:

First solution

Tweaking a bit our package.json, right where we define the script that usually gets the name of "build". In this case, what needs to be done is to add an entry point after the "webpack" value. That is, it should end up like this:

"scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "build": "webpack [entry point]"
     },

Or, for example, if we were using the app.js file in the root of our document:

"scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "build": "webpack ./app.js"
     },

Second solution

The second solution is to start by adding the configuration file webpack.config.js to the root of our project. Within, we'll need to add:

module.exports = {
     entry: "./app.js",
};

And, for starters, that would solve the enormous error that I showed in the main message of this thread, as well as the first question, which was:

1. What is that error yielded on the Terminal saying?

So what the error is saying - please, correct me if I am wrong - is that there is no index.js file to resolve in the ./src/ path—or, said differently, that ./src/index.js doesn't exist.

I still can't find a concrete explanation for the second question. This is:

2. Why can't that error be solved by changing the "main": "index.js" to "main": "app.js" (or to "main": "./src/app.js") in our package.json?

The respective answers to the third and fourth questions are also already obvious. That is:

3. Why the only solution I've found by myself implies adding an entry point to my "build"?

The answer would be:

Because, indeed, it is one of the possible solutions.

And...

4. Is it logical to add an entry point to my "build"?

Well, I assume that it is logical because, once again, WebPack defaults to ./src/index.js as its entry point.

Now, regarding questions 5 and 6, my doubts remain, in case you are kind enough to find an answer to share.

Thanks!