寫(xiě)給后端看的前端技術(shù)——webpack（上）
不懂“前端”說(shuō)的virtual dom、ReactJS、Vue、Angularjs這一大堆東西，也不懂前端說(shuō)的ES6的優(yōu)雅，也不知道為啥我用Bootstrap、jQuery就得“剁手”。世界上總得有一篇文章是寫(xiě)給后端工程師看的，后端寫(xiě)給后端看的，不裝逼，認(rèn)認(rèn)真真。
我決定用webpack作為學(xué)習(xí)前端的第一步，一方面是由于“Build工具”幾乎是學(xué)習(xí)前端的第一道門(mén)檻;另一方面它已經(jīng)“千秋萬(wàn)代一統(tǒng)江湖”了所以請(qǐng)無(wú)視——gulp、grunt之類(lèi)的吧。
一、前端工具鏈和Webpack
工具鏈?zhǔn)乔岸私?jīng)常被吐槽的一個(gè)梗，我認(rèn)為這不是前端技術(shù)更新太快，而是前端技術(shù)通俗易懂——山寨個(gè)輪子分分鐘的事情。用別人的工具不如自己做一個(gè)——多有面子。(或許這就是“文人相輕”吧)。用一幅圖表示webpack的位置
支撐整個(gè)B/S系統(tǒng)技術(shù)由三個(gè)組成——HTML、CSS、JavaScript。其中JavaScript比較特殊，借助V8引擎它可以被放到服務(wù)器端執(zhí)行這就會(huì)Node.js。Node.js之于JavaScript猶如JVM之于Java，它為JavaScript提供了一個(gè)“運(yùn)行環(huán)境”，這就給出了一個(gè)信號(hào)——我們可以用JavaScript做更多事情。
最開(kāi)始嘗試的是用Node.js寫(xiě)服務(wù)器端，這場(chǎng)運(yùn)動(dòng)造就了另一個(gè)東西——npm(Node Package Manager)，通過(guò)npm定義的規(guī)范為JavaScript引入了“包”的概念，刺激了社區(qū)的發(fā)展一時(shí)間社區(qū)出現(xiàn)了非常豐富的、可以復(fù)用的庫(kù)(比如，出現(xiàn)了Express之類(lèi)的Web Framework、甚至是ORM Framework)。
有了Node.js、npm之后進(jìn)入了“全面造輪子”的時(shí)代，各種工具、各種庫(kù)、各種場(chǎng)景野蠻生長(zhǎng)。其中有一小撮群眾迫切的需要一個(gè)“打包工具”。JavaScript代碼、CSS代碼越來(lái)越多我們期望能夠有一個(gè)工具可以合并JavaScript、合并CSS，如果可能捎帶“壓縮”一下大小。當(dāng)然這種事情用Python、Java都可以做到問(wèn)題是——“用別人家的語(yǔ)言多丟人啊”，我們現(xiàn)在有了Node.js分分鐘自己寫(xiě)一個(gè)。于是就有了gulp、grunt、webpack之類(lèi)的，當(dāng)然這些工具功能更多(比如合并小圖片、作為開(kāi)發(fā)服務(wù)器)但是它本質(zhì)上還是一個(gè)“打包工具”(Python的PIP、Java的Maven)。
二、npm
就像前面說(shuō)的那樣，你使用webpack必須安裝node.js——它是用JavaScript寫(xiě)的一個(gè)工具所以必須要有運(yùn)行環(huán)境。完整完node.js后你會(huì)驚喜的發(fā)現(xiàn)多了一個(gè)npm(恩，買(mǎi)一送一)——畢竟現(xiàn)在一個(gè)語(yǔ)言不帶上“包管理”都不好意思說(shuō)自己是“現(xiàn)代編程語(yǔ)言了”。
首先我們需要一個(gè)符合npm標(biāo)準(zhǔn)的工程
npm的規(guī)范很簡(jiǎn)單，只要你有一個(gè)package.json的配置文件就可以了，我們通過(guò)npm init來(lái)幫我們生成了一個(gè)。接下來(lái)用編輯器打開(kāi)package.json就行了。
你可能已經(jīng)猜出了了很多東西(沒(méi)猜到?請(qǐng)瀏覽npmjs.com上的package.json來(lái)理解每個(gè)配置項(xiàng)的含義)。我們重點(diǎn)關(guān)注script，它可以讓我們利用npm執(zhí)行命令行(Shell)，我來(lái)修改一下代碼
然后執(zhí)行
以“>”開(kāi)頭的輸出是npm的日志，最后的一句話(huà)才是“echo”執(zhí)行的結(jié)果。
三、初探webpack
1. 前期準(zhǔn)備
為了便于實(shí)驗(yàn)我準(zhǔn)備了兩個(gè)文件——index.js、index.html
index.html
index.js
用瀏覽器打開(kāi)index.html就可以看到彈出的對(duì)話(huà)框了。
2. 初探Webpack
webpack是npm的一個(gè)標(biāo)準(zhǔn)庫(kù)，所以通過(guò)npm安裝它，指定--save-dev參數(shù)會(huì)自動(dòng)修改package.json添加依賴(lài)(npm會(huì)在當(dāng)前目錄創(chuàng)建一個(gè)node_modules文件夾，webpack和它的依賴(lài)都放在這里，你如果膽子大進(jìn)去看一下目錄吧。恩，就是這么神奇。。就是這么多依賴(lài)~~~~)。
安裝完成后package.json被添加了webpack的依賴(lài)關(guān)系。(dev不用猜你也知道了，這是“開(kāi)發(fā)環(huán)境”依賴(lài)，npm在執(zhí)行打包的時(shí)候不會(huì)把它復(fù)制到生產(chǎn)環(huán)境，也就是說(shuō)webpack其實(shí)是一個(gè)“開(kāi)發(fā)工具”。)
webpack提供了一個(gè)命令行腳本路徑是node_modules/webpack/bin/webpack.js，我們可以直接在shell中執(zhí)行這個(gè)js文件。(打開(kāi)它你會(huì)發(fā)現(xiàn)第一行是#!/usr/bin/env node，所以它其實(shí)是由NodeJS執(zhí)行的)現(xiàn)在讓webpack幫我們“打包”index.js，生成的文件叫bundle.js
修改index.html
程序是正常工作的，以后我們對(duì)外發(fā)布的時(shí)候不再使用main.js而是使用bundle.js。
四、引入jQuery
下面修改代碼，在頁(yè)面中放入一個(gè)按鈕，通過(guò)jQuery綁定按鈕的Click事件，點(diǎn)擊之后彈出Hello。首先需要添加jQuery依賴(lài)，通過(guò)--save讓npm保存jQuery依賴(lài)，這里沒(méi)有執(zhí)行dev所以jQuery會(huì)被帶到生產(chǎn)環(huán)境
index.html
index.js
特別解釋一下第一句，這個(gè)是JavaScript的“模塊化”。JavaScript語(yǔ)言沒(méi)有模塊(或者叫“包”)、類(lèi)等模塊化的概念這就給大家留下了很多想象空間，nodejs定義了require用來(lái)支持模塊化，通過(guò)這個(gè)語(yǔ)句會(huì)自動(dòng)引入jquery.js文件(讀取node_modules/jquery/package.json中的main字段)——這就是CommonJS。但是NodeJS不能工作在瀏覽器段，于是就有了瀏覽器端的“模塊化”——AMD、CMD之類(lèi)的。時(shí)至今日ES6已經(jīng)作為JavaScript的新規(guī)范被大家接受，它終于引入了模塊化的語(yǔ)法——import xx from xx。
webpack同時(shí)支持CommonJS、ES6兩種語(yǔ)法，打包的時(shí)候會(huì)把所有的JavaScript和相關(guān)資源重新組合(比如合并JavaScript文件，合并小圖片，合并CSS)，我們可以選擇一次性加載所有JavaScript也可以通過(guò)插件分成若干個(gè)Chunk加載。
在webpack中兩種語(yǔ)法沒(méi)有什么本質(zhì)區(qū)別，我習(xí)慣性的會(huì)選擇require作為主要的方式，它可以指定完整路徑名非常便于兼容非npm模塊，還可以引入css文件、圖片，寫(xiě)法也更加清晰。項(xiàng)目里有ES6的時(shí)候我會(huì)選擇用import語(yǔ)法。
繼續(xù)執(zhí)行webpack生成build.js，這次我們會(huì)看到一些關(guān)于jquery的信息。
打開(kāi)頁(yè)面刷新、點(diǎn)擊、程序是正常工作的，打開(kāi)buildle.js看一下是不是發(fā)現(xiàn)webpack把jquery.js和我們的代碼合并到一起了?
4. 自動(dòng)化
上面我們編輯完代碼之后還需要自己執(zhí)行一下webpack，刷新頁(yè)面。我們希望編輯index.js后希望可以自動(dòng)觸發(fā)webpack編譯輸出dist/build.js，為了實(shí)現(xiàn)這個(gè)必須引入兩個(gè)東西
- webpack.config配置文件
- webpack-dev-server插件
一直來(lái)我們都是通過(guò)命令行指定“源JavaScript”和“目標(biāo)JavaScript”，現(xiàn)實(shí)中我們一般是通過(guò)配置文件指定的就是——webpack.config.js
現(xiàn)在執(zhí)行node_modules/webpack/bin/webpack.js不加參數(shù)，webpack就會(huì)使用這個(gè)配置文件了。每次都輸入這么長(zhǎng)的名字也是比較煩的，我們可以通過(guò)npm來(lái)調(diào)用webpack。仔細(xì)想想npm中的scripts定義的都是shell命令，所以我們可以修改成
npm執(zhí)行命令行的時(shí)候會(huì)把node_modules下的一些bin目錄(比如 webpack的是node_modules/webpack/bin)加入到PATH環(huán)境變量中而且允許以.js結(jié)尾的文件不指定后綴名。所以build這里我們直接寫(xiě)一個(gè)webpack就行了。(webpack其實(shí)是寫(xiě)成node_modules/webpack/bin/webpack.js的縮寫(xiě))
通過(guò)npm 執(zhí)行build
我們希望webpack可以自動(dòng)“檢查”index.js，發(fā)現(xiàn)更新后可以自動(dòng)編譯。這時(shí)候就必須安裝web-dev-server這個(gè)插件了
修改webpack.config.js
新增了devServer部分，publicPath指定了“發(fā)布路徑”。webpack-dev-server會(huì)檢測(cè)index.js的變化輸出的時(shí)候并不是把目標(biāo)文件寫(xiě)到硬盤(pán)中而是在內(nèi)存里，此處指定輸出的文件是bundle.js，如果不指定publicPath，我們?cè)L問(wèn)它的路徑應(yīng)該是localhost:3000/bundle.js。訪(fǎng)問(wèn)index.html的路徑是localhost:3000/index.html，而HTML引入的路徑是dist/bundle.js所以此處指定publicPath。(webpack-dev-server輸出路徑就會(huì)變成localhost:3000/dist/bundle.js，剛好和html呼應(yīng))
修改package.json，引入新的run命令
執(zhí)行npm run build會(huì)輸出文件到dist/bundle.js用于發(fā)布生產(chǎn)，執(zhí)行npm run start會(huì)執(zhí)行dev-server，不使用硬盤(pán)上的bundle.js用于開(kāi)發(fā)測(cè)試。
(你可以已經(jīng)猜到了webpack-dev-server也有一個(gè)bin目錄，它的原理和webpack在script字段中的原理是一樣的)
五、代碼
https://github.com/fireflyc/front-demo/tree/v1
【本文是51CTO專(zhuān)欄作者“邢森”的原創(chuàng)文章，轉(zhuǎn)載請(qǐng)聯(lián)系作者本人獲取授權(quán)】
