docs: reformat & flesh out webpack quickstart

Fixes #1995
2017-10-17 05:36:31 +00:00 · 2017-10-17 05:36:31 +00:00 · 5400501aa7
commit 5400501aa7
parent 666b7832e1
1 changed files with 39 additions and 19 deletions
--- a/docs/installation.md
+++ b/docs/installation.md
@ -17,28 +17,48 @@ If you're new to Javascript or just want a very simple setup to get your feet we

 #### Quick start with Webpack

+
+1. Initialize the directory as an npm package
 ```bash
-# 1) install
-npm install mithril --save
-
-npm install webpack --save
-
-# 2) add this line into the scripts section in package.json
-#	"scripts": {
-#		"start": "webpack src/index.js bin/app.js --watch"
-#	}
-
-# 3) create an `src/index.js` file
-
-# 4) create an `index.html` file containing `<script src="bin/app.js"></script>`
-
-# 5) run bundler
-npm start
-
-# 6) open `index.html` in the (default) browser
-open index.html
+$> npm init --yes
 ```

+2. install required tools
+```bash
+$> npm install mithril --save
+$> npm install webpack --save
+```
+
+3. Add a "start" entry to the scripts section in `package.json`
+```js
+{
+  // ...
+  "scripts": {
+    "start": "webpack src/index.js bin/app.js --watch"
+  }
+}
+```
+
+3. Create `src/index.js`
+```js
+import m from "mithril";
+
+m.render(document.body, "hello world");
+```
+
+4. create `index.html`
+```html
+<!DOCTYPE html>
+
+<script src="bin/app.js"></script>
+```
+
+5. run bundler
+```bash
+$> npm start
+```
+6. open `index.html` in your (default) browser
+
 #### Step by step

 For production-level projects, the recommended way of installing Mithril is to use NPM.