almost done

Author: yyx990803

docs/SUMMARY.md

@@ -12,6 +12,6 @@
   - [Scoped CSS](features/scoped-css.md)
   - [Hot Reload](features/hot-reload.md)
 - Workflow
+  - [Production Build](workflow/production.md)
   - [Linting](workflow/linting.md)
   - [Testing](workflow/testing.md)
-  - [Production Build](workflow/production.md)

docs/features/hot-reload.md

@@ -10,9 +10,11 @@ The easiest setup for enabling hot reload is what we outlined in the [basic tuto
 
 ``` js
 // package.json
+...
 "scripts": {
   "dev": "webpack-dev-server --inline --hot"
 }
+...
 ```
 
 This is assuming that you are serving the same `index.html` from the root of your project. By default, Webpack dev server uses the current working directory as its content base and serves all static files in the directory.

docs/start/tutorial.md

@@ -157,7 +157,8 @@ Finally, it's time to get it running! We will simply use [NPM scripts](https://d
 ``` json
 ...
 "scripts": {
-  "dev": "webpack-dev-server --inline --hot"
+  "dev": "webpack-dev-server --inline --hot",
+  "build": "webpack -p"
 }
 ...
 ```
@@ -168,7 +169,13 @@ Then run:
 npm run dev
 ```
 
-And you should see your app working at `http://localhost:8080`, with hot-reloading enabled!
+And you should see your app working at `http://localhost:8080`, with hot-reloading enabled! To build, minify and write your bundle to disk, run:
+
+``` bash
+npm run build
+```
+
+Note that Webpack uses the `webpack.config.js` if it finds one. If you named your Webpack config file with a different name, you need to specify it using the `--config /path/to/your/file` command line option.
 
 ---
 

docs/workflow/linting.md

@@ -0,0 +1,35 @@
+# Linting
+
+You may have been wondering how do you lint your code inside `*.vue` files, since they are not JavaScript. We will assume you are using [ESLint](http://eslint.org/) (if you are not, you should!).
+
+When using ESLint directly, you can use it with the [eslint-html-plugin](https://github.com/BenoitZugmeyer/eslint-plugin-html) with also supports extracting and linting the JavaScript inside `*.vue` files.
+
+Another option is using the [eslint-loader](https://github.com/MoOx/eslint-loader), and configure it to lint the JavaScript code in `*.vue` files directly:
+
+``` bash
+npm install eslint eslint-loader --save-dev
+```
+
+``` js
+// webpack.config.js
+module.exports = {
+  // ... other options
+  vue: {
+    loaders: {
+      js: 'babel!eslint'
+    }
+  },
+  babel: {
+    presets: ['es2015'],
+    plugins: ['transform-runtime']
+  }
+}
+```
+
+Two things to note here:
+
+1. We are overwriting the default loader string for all JavaScript in `*.vue` files - if we still want ES2015, we need to explicitly apply `babel-loader` and related configurations.
+
+2. Webpack loader chains are applied right-first. Make sure to apply `eslint` before `babel` so we are linting the pre-compile source code.
+
+And don't forget to create your `.eslintrc` config. Now when you run `webpack-dev-server`, you'll get instant lint warnings as you save the file!

docs/workflow/production.md

@@ -0,0 +1,39 @@
+# Production Build
+
+There are two things to do when building our bundle for production:
+
+1. Minify our application code;
+2. Use the [setup described in the Vue.js guide](http://vuejs.org/guide/application.html#Deploying_for_Production) to strip all the warnings from Vue.js source code.
+
+Here's an example config:
+
+``` js
+// webpack.config.js
+module.exports = {
+  // ... other options
+  plugins: [
+    // short-circuits all Vue.js warning code
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      }
+    }),
+    // minify with dead-code elimination
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    }),
+    // optimize module ids by occurence count
+    new webpack.optimize.OccurenceOrderPlugin()
+  ]
+}
+```
+
+Obviously we don't want to use this config during development, so there are several ways to approach this:
+
+1. Dynamically build up the configuration object based on an environment variable, as shown in [vue-loader-example](https://github.com/vuejs/vue-loader-example/blob/master/webpack.config.js#L40-L56);
+
+2. Use two separate Webpack config files, one for development and one for production. And maybe share some common options between them in a third file.
+
+It's really up to you as long as it achieves the goal.

docs/workflow/testing.md

@@ -0,0 +1,3 @@
+# Testing
+
+### Karma + karma-webpack