摘要:前言由于博主最近又閑下來了,之前覺得的官方文檔比較難啃一直放到現(xiàn)在。文章會逐步分析每個處理的用意當(dāng)然是博主自己的理解,不足之處歡迎指出溝通交流。后續(xù)將會補(bǔ)上構(gòu)建生產(chǎn)的配置分析,案例參考。前端臨床手札構(gòu)建逐步解構(gòu)下
前言
由于博主最近又閑下來了,之前覺得webpack的官方文檔比較難啃一直放到現(xiàn)在。細(xì)心閱讀多個webpack配置案例后覺得還是得自己寫個手腳架,當(dāng)然這個案例是基于vue的,但是并不影響你使用其他庫(jquery這些)。文章會逐步分析每個處理的用意(當(dāng)然是博主自己的理解),不足之處歡迎指出溝通交流。
案例一個通用簡單的手腳架,只需修改簡單配置就可使用,同時滿足多頁面需求。
multiple-page-vue-webpack-example
最近添加了雪碧圖功能,并把sass-loader替換成postcss的press,詳細(xì)可以看分支develop
使用# 安裝依賴 $ npm i # 運(yùn)行本地服務(wù),訪問 http://localhost:6002 進(jìn)行開發(fā)調(diào)試 $ npm run dev # 構(gòu)建發(fā)行版本到./dist目錄 $ npm run build目錄結(jié)構(gòu)
build/ #構(gòu)建配置目錄 src/ #源代碼目錄 clients/ #入口文件 imports/ #js代碼目錄,此為js引入的root目錄 styles/ #全局樣式目錄 templates/ #頁面模板文件(建議和入口文件名字對應(yīng))分析案例
乍看案例build目錄下代碼挺多的,而且很多剛?cè)胧謜ebpack的人都會瞬間懵逼。但是如果逐步分析理解后就會發(fā)覺其實(shí)還挺簡單易懂,下面先介紹一下每個文件作用。
/build build.js #構(gòu)建生產(chǎn)代碼 config.js #配置 dev-client.js dev-server.js #執(zhí)行本地服務(wù)器 utils.js #額外的通用方法 webpack.base.conf.js #默認(rèn)的webpack配置 webpack.dev.conf.js #本地開發(fā)的webpack配置 webpack.prod.conf.js #構(gòu)建生產(chǎn)的webpack配置工作流程 本地測試
結(jié)合上面流程圖和build目錄下的文件介紹能看出主要webpack本地測試建立在webpack和express兩個工具上面。
首先我們執(zhí)行下面代碼,能得到一個測試服務(wù)器,并能在瀏覽器預(yù)覽到我們的代碼效果
$ npm run dev
打開package.json 找到scripts能看到實(shí)際執(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-middlewarewebpack-dev-middleware 是一個結(jié)合了webpack配置的express中間件插件(不熟悉express的可以看這里),哪他都干了些什么呢?官方文檔是這樣說的:
這是一個簡單webpack中間件。它提供一個連接服務(wù)器并處理訪問webpack中的文件。
webpack中的文件寄存在內(nèi)存,不會生成文件。
如果在觀測模式下修改的文件,中間件不再提供舊包,但會延遲請求,直到編譯完成,在文件變化后頁面刷新之前你無需等待。
簡單來說就是提供一個可以讓你訪問經(jīng)過webpack處理后的服務(wù),然后看一下dev-server.js下這塊的代碼
const compiler = webpack(webpackConfig) const devMiddleware = require("webpack-dev-middleware")(compiler, { publicPath: "/", stats: { colors: true, chunks: false } })
compiler就是webpack實(shí)例,然后這里的說明一下publicPath其實(shí)是訪問的目錄根,如果改為/app/那么你訪問的地址就必須是http://localhost:6002/app/index.html。
webpack-hot-middleware使用它的目的是讓代碼變化時能更新代碼而無需刷新整個頁面,但是這塊配置就較為繁瑣。除了需要在express掛載這個中間件之外還得修改webpack配置。
首先得在每個入口前加上webpack-hot-middleware/client,還需要添加一下plugin到webpack配置
// 這塊由于是多入口處理有點(diǎn)不同,后續(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() ... ]
看到這類估計(jì)你會有所疑問,為何入口加上的是./build/dev-client而不是webpack-hot-middleware/client?因?yàn)檫@里由于使用了html-webpack-plugin而當(dāng)修改了html我們需要它整個頁面刷新,而寫了個簡單的處理,具體可以看dev-client.js,至于其他配置細(xì)節(jié)可以看官方文檔。
connect-history-api-fallback這個不多說一筆帶過,就是讓你的單頁面路由處理更自然(比如vue-router的mode設(shè)置為html5時),具體看官方文檔
關(guān)于多頁面處理這里頁面處理使用了html-webpack-plugin插件處理,至于配置需要看三個地方,首先是入口配置webpack.base.conf.js
let webpackConfig = { entry: utils.getEntry(config.entry), ... }
由于使用固定目錄結(jié)構(gòu)的關(guān)系,原理就是把src/clients/目錄下的文件都視為入口文件加載到配置。
還有模板處理webpack.dev.conf.js
webpackConfig.plugins = [].concat(webpackConfig.plugins, utils.htmlLoaders(config.template, webpackConfig.entry))
模板處理也是一樣,這里建立與一個潛規(guī)則:入口文件必須和模板文件的目錄結(jié)構(gòu)和名字一致。
在這樣的條件下,多頁面處理就簡單很多了,具體細(xì)節(jié)可看utils@getEntry()和utils@htmlLoaders()。關(guān)于html-webpack-plugin配置細(xì)節(jié)可看官方文檔。
后續(xù)將會補(bǔ)上構(gòu)建生產(chǎn)的配置分析,案例參考:vue-cli。
前端臨床手札——webpack構(gòu)建逐步解構(gòu)(下)
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/90923.html
摘要:續(xù)前端臨床手札構(gòu)建逐步解構(gòu)上工作流程案例最近添加了雪碧圖功能,并把替換成的,詳細(xì)可以看分支構(gòu)建生產(chǎn)上一篇說完了本地測試和是如何工作,接下來分析構(gòu)建生產(chǎn)模式下配置如何配置和每個模塊干了什么。 續(xù) 前端臨床手札——webpack構(gòu)建逐步解構(gòu)(上) 工作流程 showImg(https://segmentfault.com/img/bVCXjo?w=793&h=410); 案例:multip...
摘要:文件上傳基本是學(xué)習(xí)前端路上必定遇到的例子,然而網(wǎng)上能找到的都是單單滿足上傳這步的案例。但前提是需要約定傳入值和返回類型。 文件上傳基本是學(xué)習(xí)前端路上必定遇到的例子,然而網(wǎng)上能找到的都是單單滿足上傳這步的案例。大多文章之所以只說上傳這步估計(jì)是簡單易入門,但是實(shí)際工作時就會發(fā)現(xiàn)上傳文件這個功能上是簡單的,邏輯上卻比較復(fù)雜。 先說一下需求和功能點(diǎn): 需求:上傳文件到服務(wù)器 功能:上傳 單這么...
摘要:然而我真的太天真,微信瀏覽器怎樣會讓你這樣好過問題集中于自動播放視頻這塊,需求很簡單自動播放全屏不顯示工具條自動播放一步步來,自動播放這個問題在十分肯定默認(rèn)是不支持的,必須基于用戶操作下才能加載視頻。至于在微信下和一個樣。 某天收到舊同事的信息說希望我?guī)褪肿鲆幌乱粋€簡單的H5,然后我看了看的確很簡單: 就是圖片滾動到最后自動播放視頻,播完顯示個按鈕交互。 然而我真的太天真,微信瀏覽器怎...
摘要:感覺不能這樣下去就學(xué)寫一下單元測試,等他更新代碼我都跑一遍確認(rèn)一下,這樣工作安心多了。具體執(zhí)行的測試用例實(shí)現(xiàn)代碼。測試工具斷言庫測試驅(qū)動開發(fā)及測試框架入門學(xué)習(xí) 最近博主工作是和另一枚后端合作,但是經(jīng)常發(fā)現(xiàn)他寫的接口出錯,苦逼連連。感覺不能這樣下去就學(xué)寫一下單元測試,等他更新代碼我都跑一遍確認(rèn)一下,這樣工作安心多了。 經(jīng)過博主一番查找,貌似被推薦比較多的有mocha和chai,下面記錄簡...
閱讀 3053·2021-11-22 09:34
閱讀 2519·2021-09-30 09:47
閱讀 1456·2021-09-03 10:32
閱讀 3726·2021-08-16 10:49
閱讀 1797·2019-08-30 15:55
閱讀 2473·2019-08-30 15:52
閱讀 3332·2019-08-30 15:44
閱讀 1365·2019-08-30 15:44