Vue的API重点：

1、生命周期方法

2、computed

Vue：

1、数据绑定

2、Vue文件开发方式、组件化，写组件比较方便

3、render方法（Vue的核心实现也变成了虚拟Dom），数据变化时启动render方法更新HTML

4、template标签里的所有节点最终都是通过render方法中的createElement方法创建一个个节点，得到一个节点树

5、要真正理解Vue的开发模式我们要理解它的render方法，这是我们深入理解Vue很需要掌握的一个知识

webpack-dev-server: 专门用于开发环境，提高开发效率

使用方法：webpack-dev-server --config webpack.confog.js

npm中设置环境变量的包为：cross-env，为Mac和Windows两个平台统一设置环境变量的方式，用法：cross-env NODE_ENV=production或cross-env NODE_ENV=development，写在script命令里面，启动脚本的时候设置的环境变量都是存在process.env这个对象里面的，在代码中可以通过这个对象取得设置的环境变量

设置html文件作为入口：需要安装webpack插件：html-webpack-plugin

//项目初始化

npm init

package.json写命令运行和直接在命令行运行命令的区别：前者是本项目的环境，用的包也是项目里的包，而后者则是全局的环境的包。

webpack打包后的入口文件的代码中：上面部分是webpack的固有代码，用来处理模块依赖的，下面的vue的源码（需要把它分离出去）

1、减少http请求(网络优化)

2、压缩静态资源文件

3、使用浏览器的长缓存

这些都可以用webpack进行优化

webpack等工具都是在node环境里面运行的

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

报这行错是因为Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的。

参考官方文档 https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required

在webpack.config.js中加入下面代码就行了

const path=require('path')

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports={

entry:path.join(__dirname,'src/index.js'),

output:{

filename:'bundle.js',

path:path.join(__dirname,'dist')

},

plugins: [

new VueLoaderPlugin()

],

module:{

rules:[

{

test:/.vue/,

loader:'vue-loader'

}

]

}

}

各个依赖包的版本

vue-loader:13.6.0

webpack:3.10.0

vue:2.5.13

vue-template-compiler:2.5.13

css-loader:0.28.7

url-loader:0.6.2

style-loader:0.19.1

file-loader:1.1.6

stylus:0.54.5

stylus-loader:3.0.1

webpack-dev-server:2.9.7

cross-env:5.1.3

html-webpack-plugin:2.30.1

前端的价值：

1、搭建前端工程：数据缓存、es6和less（可以加快开发效率）。

2、网络优化：http(所有静态资源都是通过http请求的)。

3、api定制。

4、node.js层。

    vue-cli生成的项目就是基于webpack的前端工程。

postCSS 是一个工具，它利用各种插件来对CSS文件进行处理。

autoprefixer 插件就是对CSS文件中添加浏览器兼容头部(-webkit-)

hash 和 chunkhash 区别，就是 hash 是给同批次打包的文件用的相同的hash数，而chunkhash是根据每个chunk块单独用一个hash值

entry.vendor 属性作用是提取第三方库，会将指定的第三方库打包成一个 vendor.js 而不会和业务代码打包在一起  -- webpack 4 移除

devtool 用于页面调试的，源代码使用ES6或者.vue文件，在页面上是经过编译后的，所以直接通过开发工具查看代码跟源代码是不一样的，不利于调试。devtool 可以使用map文件对编译后的代码映射成源代码，方便调试。 -- webpack 4 有 默认设置，可不写

development 加双引号原因是为了让这个值在JS中成为一个String类型，如果不加 相当于是一个变量名。

webpack.DefinePlugin 插件作用为：

1. 使得在JS中也能使用 NODE_ENV 环境变量，调用时用的就是属性 'process.env'。

2. webpack在打包时会根据这个 环境变量 来选择框架(vue/react)的版本。像vue在开发版本中会有很多错误提示之类的功能，而在生产版本中是没有的。