diff --git a/pages/tutorials/React & Webpack.md b/pages/tutorials/React & Webpack.md
index 140d437ee..a57030036 100644
--- a/pages/tutorials/React & Webpack.md
+++ b/pages/tutorials/React & Webpack.md
@@ -23,16 +23,13 @@ proj/
└─ components/
```
-TypeScript files will start out in your `src` folder, run through the TypeScript compiler, then webpack, and end up in a `bundle.js` file in `dist`.
+TypeScript files will start out in your `src` folder, run through the TypeScript compiler, then webpack, and end up in a `main.js` file in `dist`.
Any components that we write will go in the `src/components` folder.
Let's scaffold this out:
```shell
-mkdir src
-cd src
-mkdir components
-cd ..
+mkdir -p src/components
```
Webpack will eventually generate the `dist` directory for us.
@@ -42,18 +39,17 @@ Webpack will eventually generate the `dist` directory for us.
Now we'll turn this folder into an npm package.
```shell
-npm init
+npm init -y
```
-You'll be given a series of prompts, but you can feel free to use the defaults.
-You can always go back and change these in the `package.json` file that's been generated for you.
+This creates a `package.json` file with default values.
# Install our dependencies
-First ensure Webpack is installed globally.
+First ensure Webpack is installed.
```shell
-npm install -g webpack
+npm install --save-dev webpack webpack-cli
```
Webpack is a tool that will bundle your code and optionally all of its dependencies into a single `.js` file.
@@ -61,7 +57,8 @@ Webpack is a tool that will bundle your code and optionally all of its dependenc
Let's now add React and React-DOM, along with their declaration files, as dependencies to your `package.json` file:
```shell
-npm install --save react react-dom @types/react @types/react-dom
+npm install --save react react-dom
+npm install --save-dev @types/react @types/react-dom
```
That `@types/` prefix means that we also want to get the declaration files for React and React-DOM.
@@ -69,20 +66,21 @@ Usually when you import a path like `"react"`, it will look inside of the `react
however, not all packages include declaration files, so TypeScript also looks in the `@types/react` package as well.
You'll see that we won't even have to think about this later on.
-Next, we'll add development-time dependencies on [awesome-typescript-loader](https://www.npmjs.com/package/awesome-typescript-loader) and [source-map-loader](https://www.npmjs.com/package/source-map-loader).
+Next, we'll add development-time dependencies on the [ts-loader](https://www.npmjs.com/package/ts-loader) and [source-map-loader](https://www.npmjs.com/package/source-map-loader).
```shell
-npm install --save-dev typescript awesome-typescript-loader source-map-loader
+npm install --save-dev typescript ts-loader source-map-loader
```
Both of these dependencies will let TypeScript and webpack play well together.
-awesome-typescript-loader helps Webpack compile your TypeScript code using the TypeScript's standard configuration file named `tsconfig.json`.
+ts-loader helps Webpack compile your TypeScript code using the TypeScript's standard configuration file named `tsconfig.json`.
source-map-loader uses any sourcemap outputs from TypeScript to inform webpack when generating *its own* sourcemaps.
This will allow you to debug your final output file as if you were debugging your original TypeScript source code.
-Please note that awesome-typescript-loader is not the only loader for typescript.
-You could instead use [ts-loader](https://github.com/TypeStrong/ts-loader).
-Read about the differences between them [here](https://github.com/s-panferov/awesome-typescript-loader#differences-between-ts-loader)
+Please note that ts-loader is not the only loader for typescript.
+You could instead use [awesome-typescript-loader](https://www.npmjs.com/package/awesome-typescript-loader).
+
+Read about the differences between them [here](https://github.com/s-panferov/awesome-typescript-loader#differences-between-ts-loader).
Notice that we installed TypeScript as a development dependency.
We could also have linked TypeScript to a global copy with `npm link typescript`, but this is a less common scenario.
@@ -103,10 +101,7 @@ Simply create a new file in your project root named `tsconfig.json` and fill it
"module": "commonjs",
"target": "es5",
"jsx": "react"
- },
- "include": [
- "./src/**/*"
- ]
+ }
}
```
@@ -177,7 +172,7 @@ Create a file at the root of `proj` named `index.html` with the following conten
-
+