前言：
- 文章篇幅較長，分爲三部分。
– 第一部分，vue的簡單概述
– 第二部分，webpack的原始構建過程
– 第三部分，vue-cli腳手架的快速搭建過程 - 導讀
– 簡單快速開發使用，請看第三部分
– 想了解構建過程及部分原理，請看第二部分
– vue的簡單概述，請看第一部分 - 本人是一名學生，文筆粗糙，還望各位看官多多包涵…
一、VUE簡單概述
在普通網頁中的使用：
1.使用script標籤，進行vue包的引入
2.在index頁面中，創建一個id爲app的div容器
3.通過new Vue得到一個vm實例
在項目中使用：
1.安裝vue
npm i vue -S
2.在入口函數中導入vue
import Vue from 'vue'
注意：此處可能報錯，因爲導入的vue包有可能爲閹割版，並沒有提供網頁中使用的方式
解決方法：
方法①更改 node_modules>vue>package.json，“main”:“dist/vue.runtime.common.js”，更改爲"main":“dist/vue.min.js”
方法②手動導入把上述代碼更改爲 import Vue from ‘…/node_moudles/vue/dist/vue.js’
方法③加入如下圖配置
方法④ 使用render函數
3.在入口函數創建實例（也要做在index.html頁面創建app容器）同上
4.使用路由
npm i vue-router -D
二、wabpack
webpack 優勢：
①合併壓縮靜態資源文件，減少網頁發送請求
②解決各個靜態文件之間的依賴
整體結構：
build //構建腳步目錄，保存一些webpack的初始化配置
config //構建配置目錄，項目初始化的配置，包括端口號等
node_modules //npm加載的項目依賴的模塊
src //源碼目錄，這裏是我們要開發的目錄，基本上要做的事情都在這個目錄裏
- assets //資源目錄，用來放置圖片，如logo等
- components //組件目錄，用來放組件文件
- router // 路由器
- app.vue //是項目入口文件
- main.js //是項目的核心文件
static //文件夾用來放置靜態資源目錄，如圖片、字體等。
test //初始測試目錄，可刪除
.babelrc babel //編譯參數，vue開發需要babel編譯，使高級語言轉化爲低級的語言
.gitignore //用來忽略過濾一些版本控制的文件，比如node_modules文件夾
index.html //是首頁入口文件，你可以添加一些 meta 信息或統計代碼啥。
package.json //是項目配置文件，記載着一些命令和依賴還有簡要的項目描述信息
README.md //項目的說明文檔，markdown 格式，介紹自己這個項目的
步驟：
-
安裝webpack
npm i webpack -g -
初始化項目生成package.json文件
npm init -y -
安裝webpack-cli ‘’
npm i webpack-cli -g -
初代打包命令
webpack filename -o filename --mode --development -
根目錄創建配置文件 ‘webpack.config.js’，指定入口和出口
本人遇到此處的坑（webpack4.0入口爲index.js）,更改此處入口和出口後報錯，所以本人不推薦更改入口出口文件。
-
更新後的打包命令
webpack --mode --development由於每次修改源碼再打包測試太麻煩了，所以這裏引入webpack-dev-server
-
安裝webpack-dev-server ‘npm i webpack-dev-server -D’（依賴本地webpack）
本地安裝的依賴模塊，不能在本地中輸入命令運行，需要在package.json文件中的script對象中加入“xxx”：“webpack-dev-server”
指令拓展：“webpack-dev-server --open --port --host --contentBase --hot”
webpack-dev-server 打包生成的bundle.js並沒有放到物理磁盤上，而是放在了內存
-
安裝html-webpack-plugin
作用：在內存中生成一個html頁面，把打包好後的js文件自動引入
npm html-webpack-plugin -D
9.安裝第三方loader
①CSS loader （less-loader，sass-loader）處理css文件
npm i style-loader css-loader -D
//npm i less-loader -D
//npm i sass-loader -D
②URL loader (內部依賴file-loader) 處理圖片 字體
npm i url-loader file-loader -D
limit給定的值是圖片大小，單位爲Byte。（簡單總結：大圖片建議不轉base64，小圖片可以轉base64）
如果圖片大於或等於limit值，則不會被轉爲Base64編碼。（不轉爲base64的優點 佔空間減少 ，但請求次數增加）
如果圖片小於limit值，則會被轉爲Base64編碼。（轉爲base64的優點 請求次數減少，但佔空間會變大）
name後邊的值爲8位hash編碼+圖片名字+圖片格式
③babel loader 處理高級語法無法編譯問題
npm install -D babel-loader @babel/core @babel/preset-env webpack
排除node_modules文件夾是因爲這文件夾的js文件不需要轉換編譯。
添加文件 .babelrc 並加入以下配置並安裝
④vue loader 處理組件化開發無法引入vue組件的問題
npm i vue-loader vue-template-compiler -D
到這裏，webpack的基本配置已經完成了。
三、VUE-CLI腳手架快速構建webpack項目
1.官網安裝node.js(安裝成功後即可使用npm包管理工具)
2.打開cmd
3.安裝vue及vue-cli
npm i vue vue-cli -g
4.在此目錄下開始
5.初始並創建你的webpack項目
vue init webpack 你的項目名稱
出現以下過程：
-
“Project name”：這個是項目名稱
-
“Project description”：項目描述
-
“ Author (* <*>)”：作者
-
“Vue build (Use arrow keys)”：選擇默認的就成Runtime + Compiler: recommended for most users
-
“Install vue-router? (Y/n)”：是否安裝vue-router，y
-
“Use ESLint to lint your code”:是否使用ESLint，y
-
“Pick an ESLint preset Standard”： 選擇一個ESLint預設，編寫vue項目時的代碼風格，y
-
“Set up unit tests Yes”： 是否安裝單元測試，y
-
“ Pick a test runner”：just
-
“Setup e2e tests with Nightwatch”：是否安裝e2e測試，y
-
“Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)”：是否使用安裝依賴的包，這個我使用的是npm install，也可以使用yarn install
這幾個配置選擇yes 或者 no 對於我們項目最大的影響就是，如果選擇了yes 則生成的項目會自動有相關的配置，有一些loader我們就要配套下載。
4.構建成功 沖沖衝！
