diff --git a/javascript/organizing_your_javascript_code/webpack.md b/javascript/organizing_your_javascript_code/webpack.md index b0c72dd9ef..fe42effa6a 100644 --- a/javascript/organizing_your_javascript_code/webpack.md +++ b/javascript/organizing_your_javascript_code/webpack.md @@ -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. @@ -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.