Vue和webpack儼然成為前端市場的主導 但是很多來我這里面試的小伙伴依然不知道怎么去搭建vue的開發環境 為此深感惋惜 很多人都在一味的圖快只做唯命是從的代碼搬運工 ，今天給大家一起學習的是webpack+Vue+mint-ui / element的Vue基礎架構搭建
看完之后再看看我的webpack4.x是怎么玩的吧 如受益 請留言
VUE
概述
webpack 是一個現代 JavaScript 應用程序的模塊打包器(module bundler)
webpack 是一個模塊化方案（預編譯）
webpack獲取具有依賴關系的模塊，并生成表示這些模塊的靜態資源
webpack的兩個作用：1 模塊化 2 打包
四個核心概念：入口 (entry)、輸出 (output)、加載器 loader、cha件 (plugins)
模塊化方案: webpack 和 requirejs（通過編寫代碼的方式將前端的功能，劃分成獨立的模塊）
補充：browserify 是與 webpack 相似的模塊化打包工具
webpack 預編譯 (在開發階段通過webpack進行模塊化處理, 最終項目上線, 就不在依賴于 webpack)
requirejs 線上的編譯( 代碼運行是需要依賴與 requirejs 的 )
webpack起源
-
webpack解決了現存模塊打包器的兩個痛點：
1 靜態資源的模塊化處理方案
2 Code Spliting - 代碼分離
webpack與模塊
在webpack看來：所有的靜態資源都是模塊
webpack 模塊能夠識別以下等形式的模塊之間的依賴：
-
JS的模塊化規范：
ES2015
importexportCommonJS
require()module.exportsAMD
define和require
非JS等靜態資源：
css/sass/less 文件中的
@import圖片連接，比如：樣式
url(...)或 HTML<img src=...>字體 等
安裝 webpack
全局安裝：
npm i -g webpack@3.10.0目的：在任何目錄中通過CLI使用
webpack這個命令項目安裝：
npm i -D webpack@3.10.0目的：執行當前項目的構建
webpack 的基本使用
安裝：
npm i -D webpackwebpack的兩種使用方式：1 命令行 2 配置文件（
webpack.config.js）
命令行方式演示 - demo：隔行變色
1 使用
npm init -y初始package.json，使用npm來管理項目中的包2 新建
index.html和main.js，實現隔行變色功能3 運行
webpack src/js/main.js dist/bundle.js進行打包構建，語法是：webpack 入口文件 輸出文件4 注意：需要在頁面中引入 輸出文件 的路徑（此步驟可通過配置webpack去掉）
/*
src/js/index.js
*/
// 1 導入 jQuery
import $ from 'jquery'
// 2 獲取頁面中的li元素
const $lis = $('#ulList').find('li')
// 3 隔行變色
// jQuery中的 filter() 方法用來過濾jquery對象
$lis.filter(':odd').css('background-color', '#def')
$lis.filter(':even').css('background-color', 'skyblue')
配置文件方式（推薦）
/*
webpack.config.js
運行命令：webpack
entry 入口的配置說明：
https://doc.webpack-china.org/concepts/entry-points
*/
var path = require('path')
module.exports = {
// 入口文件
entry: path.join(__dirname, 'src/js/main.js'),
// 出口文件
output: {
path: path.join(__dirname, './dist'), // 輸出文件的路徑
filename: 'bundle.js' // 輸出文件的名稱
}
}
webpack-dev-server
安裝：
npm i -D webpack-dev-server作用：配合webpack，創建開發環境（啟動服務器、監視文件變化、自動編譯、刷新瀏覽器等），提高開發效率
注意：無法直接在終端中執行
webpack-dev-server，需要通過package.json的scripts實現使用方式：
npm run dev
"scripts": {
"dev": "webpack-dev-server"
}
使用說明
注意：
webpack-dev-server將打包好的文件存儲在內存中，提高編譯和加載速度，效率更高注意：輸出的文件被放到項目根目錄中
命令行中的提示：
webpack output is served from /在
index.html頁面中直接通過/bundle.js來引入內存中的文件
配置說明 - CLI配置
--contentBase：告訴服務器在哪個目錄中提供服務，此處用來指定打開哪個目錄中的index.html頁面--contentBase ./：當前工作目錄--contentBase ./src：當前目錄下的src目錄--open：自動打開瀏覽器--port：端口號--hot：熱更新，只加載修改的文件(按需加載修改的內容)，而非全部加載
/* package.json */
/* 運行命令：npm run dev */
{
"scripts": {
"dev": "webpack-dev-server --contentBase ./src --open --port 8888 --hot"
}
}
配置說明 - webpack.config.js
const webpack = require('webpack')
devServer: {
// 服務器的根目錄 Tell the server where to serve content from
// https://webpack.js.org/configuration/dev-server/#devserver-contentbase
contentBase: path.join(__dirname, './'),
// 自動打開瀏覽器
open: true,
// 端口號
port: 8888,
// --------------- 1 熱更新 -----------------
hot: true
},
plugins: [
// ---------------- 2 啟用熱更新cha件 ----------------
new webpack.HotModuleReplacementPlugin()
]
## html-webpack-plugin cha件
安裝：
npm i -D html-webpack-plugin作用：1 根據模板生成html頁面 2 自動引入用到的
bundle.js、css等文件
/* webpack.config.js */
const htmlWebpackPlugin = require('html-webpack-plugin')
// ...
plugins: [
new htmlWebpackPlugin({
// 模板頁面路徑
template: path.join(__dirname, './index.html'),
// 在內存中生成頁面路徑，默認值為：index.html，可省略
// filename: 'index.html'
})
]
Loaders （加載器）
webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript.
webpack只能處理JavaScript資源
webpack通過loaders處理非JavaScript靜態資源
CSS 打包
1 CSS打包文件（加載）
2 SASS打包文件（編譯為CSS）
使用webpack打包CSS
安裝：
npm i -D style-loader css-loader注意：use中模塊的順序不能顛倒，加載順序：從右向左加載
/* index.js */
// 導入 css 文件
import './css/app.css'
/* webpack.config.js */
// 配置各種資源文件的loader加載器
module: {
// 配置匹配規則
rules: [
// test 用來配置匹配文件規則（正則）
// use 是一個數組，按照從后往前的順序執行加載
{test: /\.css$/, use: ['style-loader', 'css-loader']},
]
}
使用webpack打包sass文件
安裝：
npm i -D sass-loader node-sass注意：
sass-loader依賴于node-sass模塊SASS 和 LESS 一樣，都是預編譯的CSS
SASS 有兩種類型的后綴：1 .sass 2 .scss
注意：
node-sass這個包安裝的時候，如果失敗了，就用cnpm i -D node-sass
/* webpack.config.js */
// 參考：https://webpack.js.org/loaders/sass-loader/#examples
// "style-loader" ：creates style nodes from JS strings 創建style標簽
// "css-loader" ：translates CSS into CommonJS 將css轉化為CommonJS代碼
// "sass-loader" ：compiles Sass to CSS 將Sass編譯為css
module:{
rules:[
{test: /\.(scss|sass)$/, use: ['style-loader', 'css-loader', 'sass-loader']},
]
}
圖片和字體打包
安裝：
npm i -D url-loader file-loaderfile-loader：加載并重命名文件（圖片、字體 等）url-loader：將圖片或字體轉化為base64編碼格式的字符串，嵌入到樣式文件中
/* webpack.config.js */
module: {
rules:[
// 打包 圖片文件
{ test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader' },
// 打包 字體文件
{ test: /\.(woff|woff2|eot|ttf|otf)$/, use: 'file-loader' }
]
}
圖片打包細節
-
limit參數的作用：（單位為：字節(byte)）當圖片文件大小（字節）
小于指定的limit時，圖片被轉化為base64編碼格式當圖片文件大小（字節）
大于等于指定的limit時，圖片被重命名以url路徑形式加載（此時，需要file-loader來加載圖片）
圖片文件重命名，保證相同文件不會被加載多次。例如：一張圖片（a.jpg）拷貝一個副本（b.jpg），同時引入這兩張圖片，重命名后只會加載一次，因為這兩張圖片就是同一張
文件重命名以后，會通過MD5加密的方式，來計算這個文件的名稱
/* webpack.config.js */
module: {
rules: [
// {test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=100'},
{
test: /\.(jpg|png|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
字體文件打包說明
- 處理方式與圖片相同，可以使用：
file-loader或url-loader
babel
Babel is a JavaScript compiler. Use next generation JavaScript, today.
Babel 是一個JavaScript編譯器。今天就能夠使用下一代JavaScript
安裝：
npm i -D babel-core babel-loader安裝：
npm i -D babel-preset-env
基本使用（兩步）
- 第一步：
/* webpack.config.js */
module: {
rules: [
// exclude 排除，不需要編譯的目錄，提高編譯速度
{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
]
}
- 第二步：在項目根目錄中新建
.babelrc配置文件
/* .babelrc */
// 將來babel-loader運行的時候，會檢查這個配置文件，并讀取相關的語法和cha件配置
{
"presets": ["env"]
}
babel 的說明
babel的作用
-
1 語法轉換：將新的ES語法轉化為瀏覽器能識別的語法（babel-preset-*）
var fn = () => {}
2 transform-runtime 瀏覽器兼容：讓低版本瀏覽器兼容最新版ES的API
babel-preset-
作用：將新的ES語法轉化為瀏覽器能識別的ES5代碼
比如：
babel-preset-es2015就是轉化ES2015這個版本的JS語法ES2015 也就是 ES6, 下一個版本是ES7, 從 ES6 到 ES7之間經歷了 5 個階段
Stage 0 is "i've got a crazy idea",
stage 1 is "this idea might not be stupid",
stage 2 is "let's use polyfills and transpilers to play with it",
stage 3 is "let's let browsers implement it and see how it goes",
stage 4 is "now it's javascript".
transform-runtime
作用：實現瀏覽器對不支持API的兼容（兼容舊環境、填補）
安裝：
npm i -D babel-plugin-transform-runtime和npm i -S babel-runtime注意：babel-runtime包中的代碼會被打包到你的代碼中（-S）
/*
transform-runtime 的使用步驟：
1 在 .bablerc 中，添加如下配置即可
*/
"plugins": [
"transform-runtime"
]
總結
babel-core babel核心包
babel-loader 用來解析js文件
babel-preset-* 新ES語法的解析和轉換
transform-runtime 兼容舊瀏覽器，到達支持新API目的
vue 單文件組件
single-file components(單文件組件)
后綴名：
.vue，該文件需要被預編譯后才能在瀏覽器中使用注意：單文件組件依賴于兩個包 vue-loader / vue-template-compiler
安裝：
npm i -D vue-loader vue-template-compiler
<!-- App.vue 示例代碼： -->
<template>
<div>
<h1>VUE 單文件組件示例 -- App.vue</h1>
<p>這是 模板內容</p>
</div>
</template>
<script>
// 組件中的邏輯代碼
export default {}
</script>
<style>
/* 組件樣式 */
h1 {
color: red;
}
</style>
// webpack.config.js 配置：
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
使用單文件組件
/* main.js */
import Vue from 'vue'
// 導入 App 組件
import App from './App.vue'
const vm = new Vue({
el: '#app',
// 通過 render 方法，渲染App組件
render: c => c(App)
})
單文件組件使用步驟
1 安裝：
npm i -D vue-loader vue-template-compiler-
2 在
webpack.config.js中配置.vue文件的loader{ test: /\.vue$/, use: 'vue-loader' }
3 創建
App.vue單文件組件，注意：App可以是任意名稱4 在
main.js入口文件中，導入vue和App.vue組件，通過 render 將組件與實例掛到一起
單文件組件+路由
import Vue from 'vue'
import App from './App.vue'
// ------------- vue路由配置 開始 --------------
import Home from './components/home/Home.vue'
import Login from './components/login/Login.vue'
// 1 導入 路由模塊
import VueRouter from 'vue-router'
// 2 ** 調用use方法使用cha件 **
Vue.use(VueRouter)
// 3 創建路由對象
const router = new VueRouter({
routes: [
{ path: '/home', component: Home },
{path: '/login', component: Login }
]
})
// ------------- vue路由配置 結束 --------------
const vm = new Vue({
el: '#app',
render: c => c(App),
// 4 掛載到 vue 實例中
router
})
Mint-UI
基于 Vue.js 的移動端組件庫
快速開始
- 安裝：
npm i -S mint-ui
// 1 導入 mint-ui模塊
import MintUI from 'mint-ui'
// 2 導入 樣式
import 'mint-ui/lib/style.css'
// 3 注冊cha件
Vue.use(MintUI)
ElementUI
這是PC端的UI組件庫
安裝：
npm i -S element-ui
{
"presets": [
["es2015", { "modules": false }], "stage-0"
],
"plugins": [
["component", [
{
"libraryName": "mint-ui",
"style": true
},
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]
]
]
}
vue 的腳手架 - vue-cli
腳手架: 快速生成項目的目錄結構
比如: vue的腳手架
vue-cli, 安裝了vue的腳手架以后, 直接通過一條命令就可以生成一個vue項目的目錄結構( webpack都配置好了 )注意: 初始化腳手架的時候 ,所在路徑不能包含中文* !!!!
vue腳手架的使用步驟:
1 全局安裝 npm i -g vue-cli
2 通過vue命令初始化一個帶有webpack模板的項目結構: vue init webpack my-project
我們使用腳手架構建vue項目的時候, 只需要修改 src目錄 中的內容即可!!!
拿到項目, 第一件事就是: npm i 安裝項目中使用的模塊
讓項目跑起來: npm run dev / npm start
如果看完以上的內容并且可以搭建出完整的前端架構 可以運行打包，那么繼續努力來看看最新webpack4吧
webpack 4.X 使用
1
npm i -g webpack2
npm i -D webpack webpack-cli3
webpack --mode development ./src/main.js
使用上的變化：
1 需要單獨安裝 webpack-cli 才能使用 webpack命令
2 使用webpack命令需要指定模式（development 或者 production）
3 默認的入口為：./src 默認出口為：./dist
4 可以修改入口文件路徑，也可指定出口路徑
5 打包變得更快更靈活
`·
