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