# 前端構建
## 1 培訓簡介
### 1.1 內容
了解vue前端構建,如何生成生產環境下的前端代碼(如何出包、生成自定義控件、自定義按鈕的運行端等)。
### 1.2 目標
1.了解構建的功能,知道哪些東西能放入到構建中去做。
2.了解腳手架cli3的基礎功能。
3.了解代理,能夠本地前后端分離開發。
## 2 Webpack
### 2.1 Webpack基本概念
Webpack 本質上是一個打包工具,它會根據代碼的內容解析模塊依賴,幫助我們把多個模塊的代碼打包。下面是Webpack官網給的一個說明圖。
<img src='https://img-blog.csdn.net/20180523213934131'>
如上圖,webpack 會把項目中使用到的多個代碼模塊(可以是不同文件類型),打包構建成項目運行僅需要的幾個靜態文件(如.js、.css等)。
### 2.2 詳細說明
Webpack 是一個前端資源加載和打包工具。所謂的模塊就是在平時的前端開發中,
用到一些靜態資源,如JavaScript、CSS、圖片等文件,webpack就將這些靜態資源文件稱之為模塊。
webpack支持AMD和CommonJS,以及其他的一些模塊系統,并且兼容多種JS書寫規范,
它能對靜態資源進行統一的管理以及打包發布。
Webpack受到大多數前端開發者的喜愛,因為它能夠編譯打包CSS,做CSS預處理,
對JS的方言進行編譯,打包圖片,代碼壓縮,混淆等等。
與其他的構建工具相比,Webpack具有如下的一些優勢:
**1.對 CommonJS 、 AMD 、UMD 、ES6 的語法做了兼容;
*2.對 js、css、圖片等資源文件都支持打包;
3.串聯式模塊加載器以及插件機制,讓其具有更好的靈活性和擴展性,例如提供對 CoffeeScript、ES6的支持;
4.有獨立的配置文件 webpack.config.js;
*5.可以將代碼切割成不同的 chunk,實現按需加載,降低了初始化時間;
6.支持 SourceUrls 和 SourceMaps,易于調試;
*7.具有強大的 Plugin 接口,大多是內部插件,使用起來比較靈活;
8.webpack 使用異步 IO 并具有多級緩存。這使得 webpack 很快且在增量編譯上更加快。
PS:
一、CommonJS是一種后端js規范,是nodeJs遵循的一種編寫js模塊的規范,(是由nodejs將其發揚光大的),同時也開啟了js全棧的大門。
此處主要用于webpack配置。
1、定義模塊
根據CommonJS規范,一個單獨的文件就是一個模塊。每一個模塊都是一個單獨的作用域,也就是說,在該模塊內部定義的變量,無法被其他模塊讀取,除非定義為global對象的屬性
2、模塊輸出:
模塊只有一個出口,module.exports對象,我們需要把模塊希望輸出的內容放入該對象
3、加載模塊:
加載模塊使用require方法,該方法讀取一個文件并執行,返回文件內部的module.exports對象
```JS
// foobar.js
//私有變量
var test = 123;
//公有方法
function foobar () {
this.foo = function () {
// do someing ...
}
this.bar = function () {
//do someing ...
}
}
//exports對象上的方法和變量是公有的
var foobar = new foobar();
exports.foobar = foobar;
// test.js
//require方法默認讀取js文件,所以可以省略js后綴
var test = require('./boobar').foobar;
test.bar();
```
二、 AMD 全稱Asynchronous Module Definition 由于不是JavaScript原生支持,使用AMD規范進行頁面開發需要用到對應的庫函數,也就是大名鼎鼎RequireJS,AMD是 RequireJS 在推廣過程中對模塊定義的規范化的產出
requireJS主要解決兩個問題
1、多個js文件可能有依賴關系,被依賴的文件需要早于依賴它的文件加載到瀏覽器
2、js加載的時候瀏覽器會停止頁面渲染,加載文件越多,頁面失去響應時間越長
requireJS的例子
```js
// 定義模塊 myModule.js
define(['dependency'], function(){
var name = 'Byron';
function printName(){
console.log(name);
}
return {
printName: printName
};
});
// 加載模塊
require(['myModule'], function (my){
my.printName();
});
```
UMD:Universal Module Definition(通用模塊規范)
由于CommonJS和AMD都十分流行,但似乎缺少一個統一的規范。于是,UMD(通用模塊規范)出現了,它可以同時支持這兩種風格。
雖然這個模式的寫法比較難看,但是,它同時兼容了AMD和CommonJS,而且還支持老式的全局變量規范。
是由社區想出來的一種整合了CommonJS和AMD兩個模塊定義規范的方法
UMD = AMD + CommonJS
總結:
1.一切皆模塊(核心)
正如js文件可以是一個“模塊(module)”一樣,其他的(如css、image或html)文件也可視作模 塊。
因此,你可以require(‘myJSfile.js’)亦可以require(‘myCSSfile.css’)。
這意味著我們可以將事物(業務)分割成更小的易于管理的片段,從而達到重復利用等的目的。
2.按需加載(性能優化)
傳統的模塊打包工具(module bundlers)最終將所有的模塊編譯生成一個龐大的bundle.js文件。
但是在真實的app里邊,“bundle.js”文件可能有10M到15M之大可能會導致應用一直處于加載中狀態。
因此Webpack使用許多特性來分割代碼然后生成多個“bundle”文件,而且異步加載部分代碼以實現按需加載。
webpack 優化 https://www.jianshu.com/p/d2152789759d
### 2.3 簡單入口配置
#### 入口
每個應用程序都有自己的入口文件,而Webpack構建的項目的默認的入口文件就是“./src/main.js” 。
入口使用 entry 字段來進行配置,可以是個字符串或數組或者是對象;如果是數組,數組中的所有文件會打包生成一個filename文件;如果是對象,可以將不同的文件構建成不同的文件。例如:
#### loader
webpack 中提供一種處理多種文件格式的機制,便是使用 loader。我們可以把 loader 理解為是一個轉換器,負責把某種文件格式的內容轉換成 webpack 可以支持打包的模塊。
在webpack中JavaScript,CSS,LESS,TypeScript,JSX,CoffeeScript,圖片等靜態文件都是模塊,不同模塊的加載是通過模塊加載器(webpack-loader)來統一管理的當我們需要使用不同的 loader 來解析處理不同類型的文件時,我們可以在 module.rules 字段下來配置相關的規則。例如使用 Babel 來處理 .js 文件。
#### plugin
在 webpack 的構建流程中,plugin 用于處理更多其他的一些構建任務。可以這么理解,模塊代碼轉換的工作由 loader 來處理,除此之外的其他任何工作都可以交由 plugin 來完成。
webpack提供了“豐富的組件”來滿足我們不同的需求,當然也可以自行實現一個組件來滿足特定的需求。在webpack中,可以通過 plugins 字段來添加新的 plugin 。
輸出
```js
module.exports = {
entry: './src/index.js'
}
// 使用數組來對多個文件進行打包
module.exports = {
entry: {
main: [
'./src/foo.js',
'./src/bar.js'
]
},
rules: [ // loader
{
test: /\.jsx?/, // 匹配文件路徑的正則表達式,通常我們都是匹配文件類型后綴
include: [
path.resolve(__dirname, 'src') // 指定哪些路徑下的文件需要經過 loader 處理
],
use: 'babel-loader', // 指定使用的 loader
},
],
plugins: [
new UglifyPlugin() //新的plugin
],
// ...
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
}
```
注:中文官網路徑 https://www.webpackjs.com/
## 3 vue 簡化配置,cli3 腳手架
為了減少webpack的配置,cli3腳手架對webpack再次封裝,簡化了vue的webpack配置。
實際原理就是把復雜的webpack配置給出了一套完整的適用于vue工程的默認配置。
如果有修改,只需要進行微調即可。
1.工程目錄
? 參考demo工程。
2.css支持配置.browserslistrc
···
> 1%
last 7 versions
not ie <= 8
last 10 Chrome versions
last 5 Firefox versions
Safari >= 6
···
3.vue.config.js是一個可選的配置文件,cli3已經存在了默認配置,我們只需要通過vue.config.js來微調配置即可。
```js
{
productionSourceMap: false, // 如果你不需要生產環境的 source map,可以將其設置為 false 以加速生產環境構建
assetsDir: "static", // dist下的靜態資源目錄
publicPath: "./",
configureWebpack: {
plugins: [
new DistInitPlugin()
],
output: {
filename: `static/js/[name].min.js?t=${version}`,
chunkFilename: `static/js/[name].min.js?t=${version}`
},
resolve: {
alias: alias
}
},
outputDir: 'dist',
devServer: devServer,
pages: {
index: 'src/main.js' // 入口
}
}
```
#### productionSourceMap
Type: boolean
Default: true
如果你不需要生產環境的 source map,可以將其設置為 false 以加速生產環境構建。
#### publicPath
Type: string
Default: '/'
部署應用包時的基本 URL。Vue CLI 會假設你的應用是被部署在一個域名的根路徑上,例如 https://www.my-app.com/。如果應用被部署在一個子路徑上,你就需要用這個選項指定這個子路徑。例如,如果你的應用被部署在 https://www.my-app.com/my-app/,則設置 publicPath 為 /my-app/。
這個值也可以被設置為空字符串 ('') 或是相對路徑 ('./'),這樣所有的資源都會被鏈接為相對路徑,這樣打出來的包可以被部署在任意路徑,也可以用在類似 Cordova hybrid 應用的文件系統中。
#### outputDir
Type: string
Default: 'dist'
當運行 vue-cli-service build 時生成的生產環境構建文件的目錄。注意目標目錄在構建之前會被清除 (構建時傳入 --no-clean 可關閉該行為)。
#### configureWebpack
配置輸出細節、構建過程、等細節化調整。
#### devServer.proxy
如果你的前端應用和后端 API 服務器沒有運行在同一個主機上,你需要在開發環境下將 API 請求代理到 API 服務器。這個問題可以通過 vue.config.js 中的 devServer.proxy 選項來配置。
devServer.proxy 可以是一個指向開發環境 API 服務器的字符串
下面就是本地代理到服務器
const proxySite = 'http://192.168.225.70:88' // 主干
···
{
proxy: {
'/seeyon': {
target: proxySite,
changeOrigin: false,
pathRewrite: {
'^/seeyon': '/seeyon'
}
}
},
port: 8000
}
···
官網鏈接 https://cli.vuejs.org/zh/config/#vue-config-js
### 自定義命令
package.json 中的scripts,可以自己組合命名執行。
### vue-cli-service build
如何構建庫
用法:vue-cli-service build [options] [entry|pattern]
選項:
--dest 指定輸出目錄 (默認值:dist)
--target app | lib | wc | wc-async (默認值:app)
--name 庫或 Web Components 模式下的名字 (默認值:package.json 中的 "name" 字段或入口文件名)
- 概要
- 技術介紹
- 框架與環境
- vue開發
- 開發規范
- 前端開發規范
- 總體原則
- HTML規范
- HTML&css規范
- vue編碼規范
- Javascript規范
- 后端開發規范
- cap4
- 自定義控件
- 前端2.0(PC+移動)
- PC前端
- 后端
- 移動端
- 移動端接口
- 低版本協同升級到V5 8.0適配說明
- 自定義按鈕
- 自定義按鈕(無流程)
- 自定義控件(列表插槽)
- 自定義按鈕(篩選條件)
- 低版本協同升級到V5 8.0適配說明
- 門戶空間
- 門戶與欄目掛載
- 欄目開發及流程說明
- 頁面模板
- 客開通路及插件體系
- 表單設計器擴展配置
- 使用步驟
- 配置說明
- 事件API
- Demo示例
- 運行態客開通路
- 插件使用步驟
- 插件接口
- 事件接口
- 鉤子相關接口
- 表單操作接口
- Demo示例
- 插件機制
- 表單運行態接口(舊)
- 白名單插件
- 版本記錄
- vue組件庫
- 開發指南
- 開發文檔規范
- 業務組件介紹
- 業務組件
- table組件
- 分頁組件
- title組件
- 統計排隊組件
- code組件
- 條件篩選
- 批量導入
- 上傳Excel
- 批量更新
- 批量刷新
- UI組件
- 按鈕組件
- 復選組件
- 取色器組件
- 示例組件
- 水平選擇組件
- 選圖標組件
- 提示組件
- 單選組件
- 搜索組件
- 選擇組件
- 穿梭框組件
- 標簽組件
- 文本組件
- 樹組件
- 驗證組件
- 菜單組件
- iframe組件
- toolbar
- 統計組件
- 餅圖
- 柱狀圖
- 圖標
- 業務關系開發指南
- 自定義觸發
- 自定義關聯
- 后端API
- 更新表單數據緩存
- 發起表單流程
- 取得指定表單PDF或截圖
- 無流程批量添加
- 無流程批量刪除
- 無流程批量更新
- 無流程批量導出
- 客開培訓文檔
- Vue基礎培訓
- Vue實戰培訓
- Vue進階培訓
- VueCLI3培訓
- cap3
- 自定義控件
- 后端
- 移動端
- 前端編譯
- 表單運行態接口
- 協同云