前端臨床手札——webpack構建逐步解構（上）

lowett 發(fā)布于2019-08-22 10:36 / 3217人閱讀

摘要：前言由于博主最近又閑下來了，之前覺得的官方文檔比較難啃一直放到現(xiàn)在。文章會逐步分析每個處理的用意當然是博主自己的理解，不足之處歡迎指出溝通交流。后續(xù)將會補上構建生產(chǎn)的配置分析，案例參考。前端臨床手札構建逐步解構下

前言

由于博主最近又閑下來了，之前覺得webpack的官方文檔比較難啃一直放到現(xiàn)在。細心閱讀多個webpack配置案例后覺得還是得自己寫個手腳架，當然這個案例是基于vue的，但是并不影響你使用其他庫（jquery這些）。文章會逐步分析每個處理的用意（當然是博主自己的理解），不足之處歡迎指出溝通交流。

案例

一個通用簡單的手腳架，只需修改簡單配置就可使用，同時滿足多頁面需求。

multiple-page-vue-webpack-example

最近添加了雪碧圖功能，并把sass-loader替換成postcss的press，詳細可以看分支develop

使用

# 安裝依賴
$ npm i

# 運行本地服務，訪問 http://localhost:6002 進行開發(fā)調試
$ npm run dev

# 構建發(fā)行版本到./dist目錄
$ npm run build

目錄結構

build/         #構建配置目錄
src/           #源代碼目錄
    clients/   #入口文件
    imports/   #js代碼目錄，此為js引入的root目錄
    styles/    #全局樣式目錄
    templates/ #頁面模板文件（建議和入口文件名字對應）

分析案例

乍看案例build目錄下代碼挺多的，而且很多剛入手webpack的人都會瞬間懵逼。但是如果逐步分析理解后就會發(fā)覺其實還挺簡單易懂，下面先介紹一下每個文件作用。

/build
    build.js               #構建生產(chǎn)代碼
    config.js              #配置
    dev-client.js 
    dev-server.js          #執(zhí)行本地服務器
    utils.js               #額外的通用方法
    webpack.base.conf.js   #默認的webpack配置
    webpack.dev.conf.js    #本地開發(fā)的webpack配置
    webpack.prod.conf.js   #構建生產(chǎn)的webpack配置

工作流程

本地測試

結合上面流程圖和build目錄下的文件介紹能看出主要webpack本地測試建立在webpack和express兩個工具上面。

首先我們執(zhí)行下面代碼，能得到一個測試服務器，并能在瀏覽器預覽到我們的代碼效果

$ npm run dev

打開package.json 找到scripts能看到實際執(zhí)行的是

$ node build/dev-server.js

接下來就先從dev-server.js開始分析

打開dev-server.js能看到引用這些核心依賴

./config

./webpack.dev.conf

webpack

express

webpack-dev-middleware

webpack-hot-middleware

connect-history-api-fallback

前兩個是配置文件，webpack和express就不用多說了，主要看剩下那三個。

webpack-dev-middleware

webpack-dev-middleware 是一個結合了webpack配置的express中間件插件(不熟悉express的可以看這里)，哪他都干了些什么呢？官方文檔是這樣說的：

這是一個簡單webpack中間件。它提供一個連接服務器并處理訪問webpack中的文件。

webpack中的文件寄存在內存，不會生成文件。

如果在觀測模式下修改的文件，中間件不再提供舊包，但會延遲請求，直到編譯完成，在文件變化后頁面刷新之前你無需等待。

簡單來說就是提供一個可以讓你訪問經(jīng)過webpack處理后的服務，然后看一下dev-server.js下這塊的代碼

const compiler = webpack(webpackConfig)

const devMiddleware = require("webpack-dev-middleware")(compiler, {
  publicPath: "/", 
  stats: {
    colors: true,
    chunks: false
  }
})

compiler就是webpack實例，然后這里的說明一下publicPath其實是訪問的目錄根，如果改為/app/那么你訪問的地址就必須是http://localhost:6002/app/index.html。

webpack-hot-middleware

使用它的目的是讓代碼變化時能更新代碼而無需刷新整個頁面，但是這塊配置就較為繁瑣。除了需要在express掛載這個中間件之外還得修改webpack配置。

首先得在每個入口前加上webpack-hot-middleware/client，還需要添加一下plugin到webpack配置

// 這塊由于是多入口處理有點不同，后續(xù)解析多入口問題和為何使用"./build/dev-client"而不是"webpack-hot-middleware/client"
Object.keys(webpackConfig.entry).forEach(function (name) {
  webpackConfig.entry[name] = ["./build/dev-client"].concat(webpackConfig.entry[name])
})

plugins: [
    ...
    // webpack 1.0
    new webpack.optimize.OccurrenceOrderPlugin(),
    // webpack 2.0
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
    ...
]

看到這類估計你會有所疑問，為何入口加上的是./build/dev-client而不是webpack-hot-middleware/client？因為這里由于使用了html-webpack-plugin而當修改了html我們需要它整個頁面刷新，而寫了個簡單的處理，具體可以看dev-client.js，至于其他配置細節(jié)可以看官方文檔。

connect-history-api-fallback

這個不多說一筆帶過，就是讓你的單頁面路由處理更自然（比如vue-router的mode設置為html5時），具體看官方文檔

關于多頁面處理

這里頁面處理使用了html-webpack-plugin插件處理，至于配置需要看三個地方，首先是入口配置webpack.base.conf.js

let webpackConfig = {
    entry: utils.getEntry(config.entry),
    ...
}

由于使用固定目錄結構的關系，原理就是把src/clients/目錄下的文件都視為入口文件加載到配置。

還有模板處理webpack.dev.conf.js

webpackConfig.plugins = [].concat(webpackConfig.plugins, utils.htmlLoaders(config.template, webpackConfig.entry))

模板處理也是一樣，這里建立與一個潛規(guī)則：入口文件必須和模板文件的目錄結構和名字一致。

在這樣的條件下，多頁面處理就簡單很多了，具體細節(jié)可看utils@getEntry()和utils@htmlLoaders()。關于html-webpack-plugin配置細節(jié)可看官方文檔。

后續(xù)將會補上構建生產(chǎn)的配置分析，案例參考：vue-cli。

前端臨床手札——webpack構建逐步解構（下）

云服務器 GPU云服務器前端構建手札逐步實現(xiàn) 對象解構

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90923.html

前端臨床手札——webpack構建逐步解構（下）

摘要：續(xù)前端臨床手札構建逐步解構上工作流程案例最近添加了雪碧圖功能，并把替換成的，詳細可以看分支構建生產(chǎn)上一篇說完了本地測試和是如何工作，接下來分析構建生產(chǎn)模式下配置如何配置和每個模塊干了什么。續(xù) 前端臨床手札——webpack構建逐步解構（上）工作流程 showImg(https://segmentfault.com/img/bVCXjo?w=793&h=410); 案例：multip...

TerryCai 2019-08-22 10:37 評論0 收藏0
前端臨床手札——文件上傳

摘要：文件上傳基本是學習前端路上必定遇到的例子，然而網(wǎng)上能找到的都是單單滿足上傳這步的案例。但前提是需要約定傳入值和返回類型。文件上傳基本是學習前端路上必定遇到的例子，然而網(wǎng)上能找到的都是單單滿足上傳這步的案例。大多文章之所以只說上傳這步估計是簡單易入門，但是實際工作時就會發(fā)現(xiàn)上傳文件這個功能上是簡單的，邏輯上卻比較復雜。先說一下需求和功能點：需求：上傳文件到服務器功能：上傳單這么...

SexySix 2019-08-19 18:07 評論0 收藏0
前端臨床手札——在微信播放視頻的那些事

摘要：然而我真的太天真，微信瀏覽器怎樣會讓你這樣好過問題集中于自動播放視頻這塊，需求很簡單自動播放全屏不顯示工具條自動播放一步步來，自動播放這個問題在十分肯定默認是不支持的，必須基于用戶操作下才能加載視頻。至于在微信下和一個樣。某天收到舊同事的信息說希望我?guī)褪肿鲆幌乱粋€簡單的H5，然后我看了看的確很簡單：就是圖片滾動到最后自動播放視頻，播完顯示個按鈕交互。然而我真的太天真，微信瀏覽器怎...

_Zhao 2019-06-21 16:15 評論0 收藏0
前端臨床手札——單元測試

摘要：感覺不能這樣下去就學寫一下單元測試，等他更新代碼我都跑一遍確認一下，這樣工作安心多了。具體執(zhí)行的測試用例實現(xiàn)代碼。測試工具斷言庫測試驅動開發(fā)及測試框架入門學習最近博主工作是和另一枚后端合作，但是經(jīng)常發(fā)現(xiàn)他寫的接口出錯，苦逼連連。感覺不能這樣下去就學寫一下單元測試，等他更新代碼我都跑一遍確認一下，這樣工作安心多了。經(jīng)過博主一番查找，貌似被推薦比較多的有mocha和chai，下面記錄簡...

kid143 2019-08-19 18:17 評論0 收藏0