Skip to content

Commit

Permalink
Revert "Webpack: Remove npm init -y command from tutorial (TheOdinP…
Browse files Browse the repository at this point in the history
…roject#29306)"

This reverts commit 663579c.
  • Loading branch information
csm-18 committed Jan 15, 2025
1 parent 22ec0fa commit f0755c6
Showing 1 changed file with 6 additions and 4 deletions.
10 changes: 6 additions & 4 deletions javascript/organizing_your_javascript_code/webpack.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,12 @@ While it does this, we could also get it to do a whole bunch of other things, su

Webpack is one of the most popular JavaScript bundlers, if not the most popular one, and has been for a long time. Let's get started with bundling!

We'll first need to make a new directory for our practice app, so run the following in your terminal:
We'll first need to make a new directory for our practice app, then create a `package.json` file in it for npm to record information about packages we use (like Webpack). Run the following in your terminal:

```bash
mkdir webpack-practice && cd webpack-practice
mkdir webpack-practice &&
cd webpack-practice &&
npm init -y
```

Once inside your new directory, we can go ahead and install Webpack, which involves two packages.
Expand All @@ -37,9 +39,9 @@ Once inside your new directory, we can go ahead and install Webpack, which invol
npm install --save-dev webpack webpack-cli
```

Note that we included the `--save-dev` flag (you can also use `-D` as a shortcut), which tells npm to record our two packages as development dependencies. You will see a `package.json` has been created for us with both packages marked as development dependencies. We will only be using Webpack during development. The actual code that makes Webpack run will not be part of the code that the browser will run.
Note that we included the `--save-dev` flag (you can also use `-D` as a shortcut), which tells npm to record our two packages as development dependencies. We will only be using Webpack during development. The actual code that makes Webpack run will not be part of the code that the browser will run.

Also notice that when these finished installing, a `node_modules` directory and a `package-lock.json` got auto-generated. `node_modules` is where Webpack's actual code (and a whole bunch of other stuff) lives, and `package-lock.json` is just another file npm uses to track more specific package information.
Also notice that when these finished installing, a `node_modules` directory and a `package-lock.json` got auto-generated. `node_modules` is where Webpack's actual code (and a whole bunch of other stuff) lives, and `package-lock.json` is just another file npm uses to track package information.

<div class="lesson-note" markdown="1">

Expand Down

0 comments on commit f0755c6

Please sign in to comment.