Reduce differences between webpack and pwa docs

docs/README.md

@@ -1,6 +1,6 @@
 # Introduction
 
-This [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/) boilerplate is targeted towards large, serious projects and assumes you are somewhat familiar with Webpack and `vue-loader`. Make sure to also read [`vue-loader`'s documentation](http://vuejs.github.io/vue-loader/index.html) for common workflow recipes.
+This [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/) boilerplate is targeted towards large, serious projects and assumes you are somewhat familiar with Webpack and `vue-loader`. Make sure to also read [`vue-loader`'s documentation](https://vue-loader.vuejs.org/) for common workflow recipes.
 
 If you just want to try out `vue-loader` or whip out a quick prototype, use the [webpack-simple](https://github.com/vuejs-templates/webpack-simple) template instead.
 

docs/backend.md

@@ -5,22 +5,36 @@ If you are building a purely-static app (one that is deployed separately from th
 Let's take a look at the default `config/index.js`:
 
 ``` js
+// config/index.js
 'use strict'
-
 const path = require('path')
 
 module.exports = {
+  dev: {
+    / Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: 'localhost',
+    port: 8080, 
+
+    // skipping other options as they are only convenience features
+  },
   build: {
-    index: path.resolve(__dirname, 'dist/index.html'),
-    assetsRoot: path.resolve(__dirname, 'dist'),
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    productionSourceMap: true
+
+    productionSourceMap: true,
+
+    // skipping the rest ...
   },
-  dev: {
-    port: 8080,
-    proxyTable: {}
-  }
 }
 ```
 

docs/commands.md

@@ -28,7 +28,7 @@ All build commands are executed via [NPM Scripts](https://docs.npmjs.com/misc/sc
 
 - Supports ES2015+ in test files.
 - Supports all webpack loaders.
-- Easy [mock injection](http://vuejs.github.io/vue-loader/en/workflow/testing-with-mocks.html).
+- Easy [mock injection](https://vue-loader.vuejs.org/en/workflow/testing-with-mocks.html).
 
 ### `npm run e2e`
 
@@ -38,3 +38,7 @@ All build commands are executed via [NPM Scripts](https://docs.npmjs.com/misc/sc
 - Works with one command out of the box:
   - Selenium and chromedriver dependencies automatically handled.
   - Automatically spawns the Selenium server.
+
+### `npm run lint`
+
+> Runs eslint and reports any linting errors in your code. See [Linter Configuration](linter.md)

docs/e2e.md

@@ -10,7 +10,7 @@ Let's take a look at the files in the `test/e2e` directory:
 
 - `nightwatch.conf.js`
 
-  Nightwatch configuration file. See [Nightwatch's docs on configuration](http://nightwatchjs.org/guide#settings-file) for more details.
+  Nightwatch configuration file. See [Nightwatch's docs on configuration](http://nightwatchjs.org/gettingstarted#settings-file) for more details.
 
 - `custom-assertions/`
 

docs/env.md

@@ -47,5 +47,5 @@ As we can see, `test.env` inherits the `dev.env` and the `dev.env` inherits the
 It is simple to use the environment variables in your code. For example:
 
 ```js
-Vue.config.debug = process.env.DEBUG_MODE
-```
+Vue.config.productionTip = process.env.NODE_ENV === 'production'
+```

docs/linter.md

@@ -1,15 +1,16 @@
 # Linter Configuration
 
-This boilerplate uses [ESLint](http://eslint.org/) as the linter, and uses the [Standard](https://github.com/feross/standard/blob/master/RULES.md) preset with some small customizations.
+This boilerplate uses [ESLint](https://eslint.org/) as the linter, and uses the [Standard](https://github.com/feross/standard/blob/master/RULES.md) preset with some small customizations.
 
 If you are not happy with the default linting rules, you have several options:
 
 1. Overwrite individual rules in `.eslintrc.js`. For example, you can add the following rule to enforce semicolons instead of omitting them:
 
   ``` js
+  // .eslintrc.js
   "semi": [2, "always"]
   ```
 
 2. Pick a different ESLint preset when generating the project, for example [eslint-config-airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb).
 
-3. Pick "none" for ESLint preset when generating the project and define your own rules. See [ESLint documentation](http://eslint.org/docs/rules/) for more details.
+3. Pick "none" for ESLint preset when generating the project and define your own rules. See [ESLint documentation](https://eslint.org/docs/rules/) for more details.

docs/pre-processors.md

@@ -1,6 +1,6 @@
 # Pre-Processors
 
-This boilerplate has pre-configured CSS extraction for most popular CSS pre-processors including LESS, SASS, Stylus, and PostCSS. To use a pre-processor, all you need to do is installing the appropriate webpack loader for it. For example, to use SASS:
+This boilerplate has pre-configured CSS extraction for most popular CSS pre-processors including LESS, SASS, Stylus, and PostCSS. To use a pre-processor, all you need to do is install the appropriate webpack loader for it. For example, to use SASS:
 
 ``` bash
 npm install sass-loader node-sass --save-dev
@@ -20,19 +20,23 @@ Once installed, you can use the pre-processors inside your `*.vue` components us
 
 ### A note on SASS syntax
 
-- `lang="scss"` corresponds to the CSS-superset syntax (with curly braces and semicolones).
+- `lang="scss"` corresponds to the CSS-superset syntax (with curly braces and semicolons).
 - `lang="sass"` corresponds to the indentation-based syntax.
 
 ### PostCSS
 
-Styles in `*.vue` files are piped through PostCSS by default, so you don't need to use a specific loader for it. You can simply add PostCSS plugins you want to use in `build/webpack.base.conf.js` under the `vue` block:
+Styles in `*.vue` files and style files (`*.css`, `*.scss` etc) are piped through PostCSS by default, so you don't need to use a specific loader for it.
+
+You can simply add PostCSS plugins you want to use to the `.postcssrc.js`file in your project's root directory:
 
 ``` js
-// build/webpack.base.conf.js
+// https://github.com/michael-ciniawsky/postcss-load-config
+
 module.exports = {
-  // ...
-  vue: {
-    postcss: [/* your plugins */]
+  "plugins": {
+    // to edit target browsers: use "browserslist" field in package.json
+    "postcss-import": {},
+    "autoprefixer": {}
   }
 }
 ```

docs/proxy.md

@@ -31,7 +31,7 @@ In addition to static urls you can also use glob patterns to match URLs, e.g. `/
 
 ``` js
 proxyTable: {
-  '*': {
+  '**': {
     target: 'http://jsonplaceholder.typicode.com',
     filter: function (pathname, req) {
       return pathname.match('^/api') && req.method === 'GET'

docs/static.md

@@ -1,14 +1,14 @@
-# Handing Static Assets
+# Handling Static Assets
 
 You will notice in the project structure we have two directories for static assets: `src/assets` and `static/`. What is the difference between them?
 
 ### Webpacked Assets
 
 To answer this question, we first need to understand how Webpack deals with static assets. In `*.vue` components, all your templates and CSS are parsed by `vue-html-loader` and `css-loader` to look for asset URLs. For example, in `<img src="./logo.png">` and `background: url(./logo.png)`, `"./logo.png"` is a relative asset path and will be **resolved by Webpack as a module dependency**.
 
-Because `logo.png` is not JavaScript, when treated as a module dependency, we need to use `url-loader` and `file-loader` to process it. This boilerplate has already configured these loaders for you, so you basically get features such as filename fingerprinting and conditional base64 inlining for free, while being able to use relative/module paths without worrying about deployment.
+Because `logo.png` is not JavaScript, when treated as a module dependency, we need to use `url-loader` and `file-loader` to process it. This template has already configured these loaders for you, so you basically get features such as filename fingerprinting and conditional base64 inlining for free, while being able to use relative/module paths without worrying about deployment.
 
-Since these assets may be inlined/copied/renamed during build, they are essentially part of your source code. This is why it is recommended to place Webpack-processed static assets inside `/src`, along side other source files. In fact, you don't even have to put them all in `/src/assets`: you can organize them based on the module/component using them. For example, you can put each component in its own directory, with its static assets right next to it.
+Since these assets may be inlined/copied/renamed during build, they are essentially part of your source code. This is why it is recommended to place Webpack-processed static assets inside `/src`, alongside other source files. In fact, you don't even have to put them all in `/src/assets`: you can organize them based on the module/component using them. For example, you can put each component in its own directory, with its static assets right next to it.
 
 ### Asset Resolving Rules
 
@@ -41,7 +41,7 @@ In comparison, files in `static/` are not processed by Webpack at all: they are
 As an example, with the following default values:
 
 ``` js
-// config.js
+// config/index.js
 module.exports = {
   // ...
   build: {

docs/structure.md

@@ -17,20 +17,24 @@
 ├── static/                     # pure static assets (directly copied)
 ├── test/
 │   └── unit/                   # unit tests
-│   │   ├── specs/              # test spec files
-│   │   ├── index.js            # test build entry file
-│   │   └── karma.conf.js       # test runner config file
+│   │   ├── specs/              # test spec files
+│   │   ├── eslintrc            # config file for eslint with extra settings only for unit tests
+│   │   ├── index.js            # test build entry file
+│   │   └── karma.conf.js       # test runner config file
 │   └── e2e/                    # e2e tests
 │   │   ├── specs/              # test spec files
 │   │   ├── custom-assertions/  # custom assertions for e2e tests
 │   │   ├── runner.js           # test runner script
 │   │   └── nightwatch.conf.js  # test runner config file
 ├── .babelrc                    # babel config
-├── .postcssrc.js               # postcss config
+├── .editorconfig               # indentation, spaces/tabs and similar settings for your editor
 ├── .eslintrc.js                # eslint config
-├── .editorconfig               # editor config
+├── .eslintignore               # eslint ignore rules
+├── .gitignore                  # sensible defaults for gitignore
+├── .postcssrc.js               # postcss config
 ├── index.html                  # index.html template
-└── package.json                # build scripts and dependencies
+├── package.json                # build scripts and dependencies
+└── README.md                   # Default README file
 ```
 
 ### `build/`