webpack+vue 前端工程
webpack
vue
vue-router
adios
vuex
*.vue文件
web pack在生产环境中的打包的优化
发布前做一些优化
网络优化：减少HTTP请求、压缩静态资源的文件、使用浏览器的长缓存来降低流量的使用和提高网页的加载速度
目的：
重点和难点不是业务的开发，
难点是“工程化”
1. 学会搭建前端工程（因为现在的前端项目越来越复杂，不像以前简简单单几个html页面完事）
1.1 数据缓存
1.2 提高开发效率（es6、less、sass、less、stylus、jade）
1.3 代码规范化（eslint）
2. 网络优化 需要对http有深入的理解
3. API定制（前后端交互api规范的定制）
4. nodeJS功底 webpack grunt gulp等众多工具都是在nodeJS的环境中运行的（都需要nodeJS）
第一课：搭建项目
1. npm init
生成一个npm项目，项目中含有一个package.json文件，这个文件是npm的配置文件
2. npm install webpack vue vue-loader 安装之后会给出警告，需要第三步中的两个第三方依赖
3. npm i css-loader vue-template-compiler
4. 项目中创建一个src目录，src目录中创建一个app.vue文件
5. app.vue 文件中编写
<template><div>{{text}}</div></template>
<script>
<style>
6. 一个最简单的vue组件（每个Vue文件就被看做一个vue组件）写好了，但是显然这个app.vue是没有办法直接在浏览器中运行的（浏览器不认识*.vue文件），所以我们需要想办法让其可以运行，那么就需要下面的步骤
7. 新建一个webpack.config.js
webpack是帮助我们打包前端资源的（前端资源有很多，例如：javascript、css、图片、字体 ），这些前端资源都是需要我们通过http请求加载的内容，而这些内容我们都是可以全部融入到js文件中，然后去加载js文件的方式来实现的，所以我们以js文件作为程序的入口
const path = require(‘path’)
module.exports = {
entry: path()
}
8. 上面的entry需要填写入口的js文件，但是现在还没有，所以我们就创建一个，在src目录下创建一个index.js文件作为我们的入口文件
index.js是入口文件，也就是说现在我们想让浏览器打开我们的vue文件，就得把app.vue挂载到index.js文件中去，这样index.js->app.vue
挂载的办法如下：
import Vue from ‘vue’
import App from ‘./app.vue’
const root = document.createElement(‘div’)
document.body.appendChild(root)
new Vue({
render: (h) => h(App)
}).$mount(root)
9.入口文件已经写好，此时第7步中的path属性就可以写了，当然还需要一个入口，通过output指定
__dirname是node的一个全局变量，代表的是当前js文件所在的目录，本项目中代表的就是项目根目录；
path.join()方法接收两个参数，作用是将两个参数拼接成一个目录，如下__dirname和src/index.js就是index.js文件的绝对路径
module.exports = {
entry: path.join(__dirname, ‘src/index.js’),
output: {
filename: ‘bundle.js’,
path: path.join(__dirname, ‘dist’)
}
}
经过上面的配置，web pack就是把index.js文件作为入口文件进行打包，最终生成dist目录下面的bundle.js文件
10. 此时就可以执行webpack命令来进行打包了，但是在命令行中直接输入webpack的话会调用npm全局的webpack命令来进行打包，这样存在的问题是：全局的webpack可能因为版本、配置等众多问题导致打包失败，所以我们需要在项目中指定webpack版本和配置文件，来精确的使用webpack进行打包，配置方法是：打开package.json文件-在scripts对象中配置build指令
"scripts": {
"build": "webpack --config webpack.config.js"
},
scripts配置项代表的是npm可以执行的脚本命令，大白话就是：npm run xxx, 这个xxx就是scripts配置项的“键”，而run xxx之后背后真正需要执行什么东西，这个东西就是键对应的值。拿上面的配置举例：
build ：代表的是将来可以在命令行中输入 npm run build
webpack --config webpack.config.js:代表的就是run build之后真正执行的命令是webpack打包命令
webpack打包命令非常简单，直接在命令行中输入webpack即可，而其后的--config代表的是：指定打包时参考的配置文件
好了，打包开始，命令行输入npm run build，不幸的是报错了
------ 报错内容如下：
ERROR in ./App.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div class="app">
| 这是第一个vue组件{{text}}
@ ./index.js 2:0-27
npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/lib/node_modules/cnpm/node_modules/.bin/npm" "--userconfig=/Users/zhoupan/.cnpmrc" "--disturl=https://npm.taobao.org/mirrors/node" "--registry=https://registry.npm.taobao.org" "run" "build"
npm ERR! node v7.4.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! webpack-study-build-project@1.0.0 build: `webpack --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webpack-study-build-project@1.0.0 build script 'webpack --config webpack.config.js'.
------
“You may need an appropriate loader to handle this file type.”这句话的意思就是告诉我们需要给.vue这种文件申明一个loader，使webpack可以认识这种文件并去处理它，因为原生的webpack是只支持.js文件类型的，并且只支持es5的语法，所以我们在使用超出它理解范围的某种语法的时候，我们要使用一些可以帮助它理解并处理的工具去处理这些文件，具体的做法如下：
打开webpack.config.js文件，增加module配置项
const path = require('path')
module.exports = {
entry: path.join(__dirname, 'index.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader'
}
]
}
}
module配置项有一个rules属性，该属性是一个数组，可以配置好多种规则，每项规则有test和loader两个重要属性，其中
test是一个正则表达式，申明处理哪种文件，例如上面的/.vue$/表示的是以.vue结尾的文件；
loader用来指定匹配到test申明的文件需要使用哪种loader进行处理，例如上面的’vue-loader’；
整体的含义就是使用vue-loader来处理.vue文件
至此，再次执行npm run build命令，完美的打包出一个bundle.js文件
