Merge branch 'master' of github.com:vuejs-templates/webpack

Author: codeams

Diff for: .gitignore

@@ -2,3 +2,7 @@ node_modules
 .DS_Store
 docs/_book
 test/
+node_modules
+.DS_Store
+docs/_book
+test/

Diff for: README.md

@@ -21,6 +21,14 @@ $ npm install
 $ npm run dev
 ```
 
+This will scaffold the project using the `master` branch. If you wish to use the latest version of the webpack template, do the following instead:
+
+``` bash
+$ vue init webpack#develop my-project
+```
+
+:warning: **The develop branch is not considered stable and can contain bugs or not build at all, so use at your own risk.**
+
 The development server will run on port 8080 by default. If that port is already in use on your machine, the next free port will be used.
 
 ### Include Foundation variables in all *.vue files
@@ -47,7 +55,7 @@ stylus: generateLoaders('stylus'),
   - Source maps
 
 - `npm run build`: Production ready build.
-  - JavaScript minified with [UglifyJS](https://github.com/mishoo/UglifyJS2).
+  - JavaScript minified with [UglifyJS v3](https://github.com/mishoo/UglifyJS2/tree/harmony).
   - HTML minified with [html-minifier](https://github.com/kangax/html-minifier).
   - CSS across all components extracted into a single file and minified with [cssnano](https://github.com/ben-eb/cssnano).
   - Static assets compiled with version hashes for efficient long-term caching, and an auto-generated production `index.html` with proper URLs to these generated assets.

Diff for: docs/SUMMARY.md

@@ -2,6 +2,7 @@
 
 - [Project Structure](structure.md)
 - [Build Commands](commands.md)
+- [Babel Configuration](babel.md)
 - [Linter Configuration](linter.md)
 - [Pre-Processors](pre-processors.md)
 - [Handling Static Assets](static.md)

Diff for: docs/babel.md

@@ -0,0 +1,22 @@
+# Babel Configuration
+
+This boilerplate uses [`babel-preset-env`](https://www.npmjs.com/package/babel-preset-env) for configuring babel. You can read more about it here - http://2ality.com/2017/02/babel-preset-env.html.
+
+> A Babel preset that compiles ES2015+ down to ES5 by automatically determining the Babel plugins and polyfills you need based on your targeted browser or runtime environments.
+
+It uses [`browserslist`](https://github.com/ai/browserslist) to parse this information, so we can use any [valid query format supported by `browserslist`](https://github.com/ai/browserslist#queries).
+
+However there is a caveat. `browserslist` recommends defining the target in a common place like `package.json` or in a `.browserslistrc` config file. This allows tools like [`autoprefixer`](https://github.com/postcss/autoprefixer) and [`eslint-plugin-compat`](https://github.com/amilajack/eslint-plugin-compat) to share the config. For this template, `browserslist` is configured in the `package.json`:
+
+```json
+{
+  "...": "...",
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
+```
+
+But the latest stable release of `babel-preset-env`, `v1.6.1` does not support loading the config from `package.json`. So the target environment is repeated in `.babelrc`. If you wish to change your target environment, please be sure to update both `package.json` and `.babelrc`. Note that this has been fixed in the beta version([`@babel/[email protected]`](https://github.com/babel/babel/tree/master/packages/babel-preset-env)) and the template will be updated once it is out of beta.

Diff for: docs/backend.md

@@ -10,17 +10,31 @@ Let's take a look at the default `config/index.js`:
 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: {}
-  }
 }
 ```
 

Diff for: docs/commands.md

@@ -16,7 +16,7 @@ All build commands are executed via [NPM Scripts](https://docs.npmjs.com/misc/sc
 
 > Build assets for production. See [Integrating with Backend Framework](backend.md) for more details.
 
-- JavaScript minified with [UglifyJS](https://github.com/mishoo/UglifyJS2).
+- JavaScript minified with [UglifyJS v3](https://github.com/mishoo/UglifyJS2/tree/harmony).
 - HTML minified with [html-minifier](https://github.com/kangax/html-minifier).
 - CSS across all components extracted into a single file and minified with [cssnano](https://github.com/ben-eb/cssnano).
 - All static assets compiled with version hashes for efficient long-term caching, and a production `index.html` is auto-generated with proper URLs to these generated assets.
@@ -36,3 +36,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)

Diff for: docs/linter.md

@@ -14,3 +14,14 @@ If you are not happy with the default linting rules, you have several options:
 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](https://eslint.org/docs/rules/) for more details.
+
+## Fixing Linting Errors
+
+You can run the following command to let eslint fix any errors it finds (if it can - not all errors are fixable like this):
+
+```
+npm run lint -- --fix
+```
+
+*(The `--` in the middle is necessary to ensure the `--fix` option is passdd to `eslint`, not to `npm`)*
+

Diff for: docs/pre-processors.md

@@ -25,14 +25,18 @@ Once installed, you can use the pre-processors inside your `*.vue` components us
 
 ### 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": {}
   }
 }
 ```

Diff for: docs/structure.md

@@ -18,20 +18,25 @@
 ├── test/
 │   └── unit/                   # unit tests
 │   │   ├── specs/              # test spec files
-│   │   ├── setup.js            # file that runs before Jest tests
+│   │   ├── 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
+│   │   ├── jest.conf.js        # Config file when using Jest for unit tests
+│   │   └── karma.conf.js       # test runner config file when using Karma for unit tests
+│   │   ├── setup.js            # file that runs before Jest runs your unit tests
 │   └── 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/`