docs: remove webpack 1 reference, refer new cli

Author: yyx990803

docs/en/configurations/advanced.md

@@ -12,8 +12,6 @@ To do that, specify the `loaders` option for `vue-loader`:
 
 > Note that `preLoaders` and `postLoaders` are only supported in 10.3.0+
 
-### webpack 2.x
-
 ``` js
 module.exports = {
   // other options...
@@ -59,27 +57,4 @@ module.exports = {
 }
 ```
 
-### webpack 1.x
-
-``` js
-// webpack.config.js
-module.exports = {
-  // other options...
-  module: {
-    loaders: [
-      {
-        test: /\.vue$/,
-        loader: 'vue'
-      }
-    ]
-  },
-  // `vue-loader` configurations
-  vue: {
-    loaders: {
-      // same configuration rules as above
-    }
-  }
-}
-```
-
 A more practical usage of the advanced loader configuration is [extracting CSS inside components into a single file](./extract-css.md).

docs/en/configurations/custom-blocks.md

@@ -41,7 +41,6 @@ comp-a h2 {
 #### webpack.config.js
 
 ``` js
-// webpack 2.x
 var ExtractTextPlugin = require("extract-text-webpack-plugin")
 
 module.exports = {

docs/en/configurations/extract-css.md

@@ -39,9 +39,6 @@ Note this only extracts `*.vue` files though - CSS imported in JavaScript still
 
 Example config to extract all the processed CSS in all Vue components into a single CSS file:
 
-### webpack 2.x
-
-
 ``` js
 // webpack.config.js
 var ExtractTextPlugin = require("extract-text-webpack-plugin")
@@ -69,36 +66,3 @@ module.exports = {
   ]
 }
 ```
-
-### webpack 1.x
-
-``` bash
-npm install extract-text-webpack-plugin --save-dev
-```
-
-``` js
-// webpack.config.js
-var ExtractTextPlugin = require("extract-text-webpack-plugin")
-
-module.exports = {
-  // other options...
-  module: {
-    loaders: [
-      {
-        test: /\.vue$/,
-        loader: 'vue'
-      },
-    ]
-  },
-  vue: {
-    loaders: {
-      css: ExtractTextPlugin.extract("css"),
-      // you can also include <style lang="less"> or other langauges
-      less: ExtractTextPlugin.extract("css!less")
-    }
-  },
-  plugins: [
-    new ExtractTextPlugin("style.css")
-  ]
-}
-```

docs/en/features/css-modules.md

@@ -89,17 +89,6 @@ CSS Modules are processed via [css-loader](https://github.com/webpack/css-loader
 You can use vue-loader's `cssModules` option to provide additional query options to `css-loader`:
 
 ``` js
-// webpack 1
-vue: {
-  cssModules: {
-    // overwrite local ident name
-    localIdentName: '[path][name]---[local]---[hash:base64:5]',
-    // enable camelCase
-    camelCase: true
-  }
-}
-
-// webpack 2
 module: {
   rules: [
     {

docs/en/features/postcss.md

@@ -27,20 +27,7 @@ Sometimes the user may want to use `lang="postcss"` only for syntax highlighting
 
 Alternatively, you can specify PostCSS config specifically for `*.vue` files using the `postcss` option for `vue-loader`.
 
-Example usage in webpack 1.x:
-
-``` js
-// webpack.config.js
-module.exports = {
-  // other configs...
-  vue: {
-    // use custom PostCSS plugins
-    postcss: [require('postcss-cssnext')()]
-  }
-}
-```
-
-For webpack 2.x:
+Example:
 
 ``` js
 // webpack.config.js

docs/en/options.md

@@ -1,10 +1,9 @@
 # Options Reference
 
-## Usage Difference Between webpack 1 & 2
-
-For webpack 2: pass the options directly to the loader rule.
+## Where to Place the Options
 
 ``` js
+// webpack.config.js
 module.exports = {
   // ...
   module: {
@@ -21,20 +20,9 @@ module.exports = {
 }
 ```
 
-For webpack 1.x: add a root `vue` block in your webpack config.
-
-``` js
-module.exports = {
-  // ...
-  vue: {
-    // `vue-loader` options
-  }
-}
-```
-
 ### loaders
 
-- type: `{ [lang: string]: string }`
+- type: `{ [lang: string]: string | Object | Array }`
 
   An object specifying webpack loaders to overwrite the default loaders used for language blocks inside `*.vue` files. The key corresponds to the `lang` attribute for language blocks, if specified. The default `lang` for each type is:
 
@@ -45,7 +33,6 @@ module.exports = {
   For example, to use `babel-loader` and `eslint-loader` to process all `<script>` blocks:
 
   ``` js
-  // webpack 2.x config
   module: {
     rules: [
       {
@@ -61,17 +48,36 @@ module.exports = {
   }
   ```
 
+  You can also use object or array syntax (note the options must be serializable):
+
+  ``` js
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            js: [
+              { loader: 'cache-loader' },
+              { loader: 'babel-loader', options: { presets: ['env'] } }
+            ]
+          }
+        }
+      }
+    ]
+  }
+  ```
+
 ### preLoaders
 
 - type: `{ [lang: string]: string }`
-- only supported in 10.3.0+
 
   The config format is the same as `loaders`, but `preLoaders` are applied to corresponding language blocks before the default loaders. You can use this to pre-process language blocks - a common use case would be build-time i18n.
 
 ### postLoaders
 
 - type: `{ [lang: string]: string }`
-- only supported in 10.3.0+
 
   The config format is the same as `loaders`, but `postLoaders` are applied after the default loaders. You can use this to post-process language blocks. However note that this is a bit more complicated:
 
@@ -81,7 +87,7 @@ module.exports = {
 
 ### postcss
 
-> Note: in 11.0.0+ it is recommended to use a PostCSS config file instead. [The usage is the same as `postcss-loader`](https://github.com/postcss/postcss-loader#usage).
+> Note: It is recommended to use a PostCSS config file instead so that your styles in vue files and normal CSS can share the same config. [The usage is the same as `postcss-loader`](https://github.com/postcss/postcss-loader#usage).
 
 - type: `Array` or `Function` or `Object`
 
@@ -208,21 +214,6 @@ module.exports = {
   Example configuration:
 
   ``` js
-  // webpack 1
-  vue: {
-    buble: {
-      // enable object spread operator
-      // NOTE: you need to provide Object.assign polyfill yourself!
-      objectAssign: 'Object.assign',
-
-      // turn off the `with` removal
-      transforms: {
-        stripWith: false
-      }
-    }
-  }
-
-  // webpack 2
   module: {
     rules: [
       {

docs/en/start/setup.md

@@ -1,13 +1,12 @@
 # Setting Up a Project
 
-### Using `vue-cli`
+### Using `@vue/cli`
 
-It's recommended to scaffold a project using `vue-loader` with `vue-cli`:
+It's recommended to scaffold a project using `vue-loader` with `@vue/cli`:
 
 ``` bash
-npm install -g vue-cli
-vue init webpack-simple hello-vue
+npm install -g @vue/cli
+vue create hello-vue
 cd hello-vue
-npm install
-npm run dev # ready to go!
+npm run serve # ready to go!
 ```

docs/en/workflow/linting.md

@@ -2,14 +2,16 @@
 
 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](https://eslint.org/) (if you are not, you should!).
 
-You will also need the [eslint-plugin-html](https://github.com/BenoitZugmeyer/eslint-plugin-html) which supports extracting and linting the JavaScript inside `*.vue` files.
+You will also need the official [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) which supports linting both the template and script parts of Vue files.
 
-Make sure to include the plugin in your ESLint config:
+Make sure to use the plugin's included config in your ESLint config:
 
 ``` json
-"plugins": [
-  "html"
-]
+{
+  "extends": [
+    "plugin:vue/essential"
+  ]
+}
 ```
 
 Then from the command line:
@@ -24,68 +26,19 @@ Another option is using [eslint-loader](https://github.com/MoOx/eslint-loader) s
 npm install eslint eslint-loader --save-dev
 ```
 
-``` js
-// webpack.config.js
-module.exports = {
-  // ... other options
-  module: {
-    loaders: [
-      {
-        test: /\.vue$/,
-        loader: 'vue!eslint'
-      }
-    ]
-  }
-}
-```
-
-Note that webpack loader chains are applied **right-first**. Make sure to apply `eslint` before `vue` so we are linting the pre-compile source code.
-
-One thing we need to consider is using third party `*.vue` components shipped in NPM packages. In such case, we want to use `vue-loader` to process the third party component, but do not want to lint it. We can separate the linting into webpack's [preLoaders](https://webpack.github.io/docs/loaders.html#loader-order):
-
-``` js
-// webpack.config.js
-module.exports = {
-  // ... other options
-  module: {
-    // only lint local *.vue files
-    preLoaders: [
-      {
-        test: /\.vue$/,
-        loader: 'eslint',
-        exclude: /node_modules/
-      }
-    ],
-    // but use vue-loader for all *.vue files
-    loaders: [
-      {
-        test: /\.vue$/,
-        loader: 'vue'
-      }
-    ]
-  }
-}
-```
-
-For webpack 2.x:
+Make sure it's applied as a pre-loader:
 
 ``` js
 // webpack.config.js
 module.exports = {
   // ... other options
   module: {
     rules: [
-      // only lint local *.vue files
       {
         enforce: 'pre',
-        test: /\.vue$/,
+        test: /\.(js|vue)$/,
         loader: 'eslint-loader',
         exclude: /node_modules/
-      },
-      // but use vue-loader for all *.vue files
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader'
       }
     ]
   }

docs/en/workflow/production.md

@@ -19,18 +19,12 @@ module.exports = {
       }
     }),
     // minify with dead-code elimination
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    }),
-    // webpack 1 only - optimize module ids by occurrence count
-    new webpack.optimize.OccurrenceOrderPlugin()
+    new webpack.optimize.UglifyJsPlugin()
   ]
 }
 ```
 
-Obviously we don't want to use this config during development, so there are several ways to approach this:
+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;