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文件
