寫給后端看的前端技術(shù)——webpack（上）

作者：邢森 2017-02-23 20:30:29

我決定用webpack作為學(xué)習(xí)前端的第一步，一方面是由于“Build工具”幾乎是學(xué)習(xí)前端的第一道門檻;另一方面它已經(jīng)“千秋萬代一統(tǒng)江湖”了所以請(qǐng)無視——gulp、grunt之類的吧。

不懂“前端”說的virtual dom、ReactJS、Vue、Angularjs這一大堆東西，也不懂前端說的ES6的優(yōu)雅，也不知道為啥我用Bootstrap、jQuery就得“剁手”。世界上總得有一篇文章是寫給后端工程師看的，后端寫給后端看的，不裝逼，認(rèn)認(rèn)真真。

[[184087]]

一、前端工具鏈和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做更多事情。

最開始嘗試的是用Node.js寫服務(wù)器端，這場(chǎng)運(yùn)動(dòng)造就了另一個(gè)東西——npm(Node Package Manager)，通過npm定義的規(guī)范為JavaScript引入了“包”的概念，刺激了社區(qū)的發(fā)展一時(shí)間社區(qū)出現(xiàn)了非常豐富的、可以復(fù)用的庫(比如，出現(xiàn)了Express之類的Web Framework、甚至是ORM Framework)。

有了Node.js、npm之后進(jìn)入了“全面造輪子”的時(shí)代，各種工具、各種庫、各種場(chǎng)景野蠻生長。其中有一小撮群眾迫切的需要一個(gè)“打包工具”。JavaScript代碼、CSS代碼越來越多我們期望能夠有一個(gè)工具可以合并JavaScript、合并CSS，如果可能捎帶“壓縮”一下大小。當(dāng)然這種事情用Python、Java都可以做到問題是——“用別人家的語言多丟人啊”，我們現(xiàn)在有了Node.js分分鐘自己寫一個(gè)。于是就有了gulp、grunt、webpack之類的，當(dāng)然這些工具功能更多(比如合并小圖片、作為開發(fā)服務(wù)器)但是它本質(zhì)上還是一個(gè)“打包工具”(Python的PIP、Java的Maven)。

二、npm

就像前面說的那樣，你使用webpack必須安裝node.js——它是用JavaScript寫的一個(gè)工具所以必須要有運(yùn)行環(huán)境。完整完node.js后你會(huì)驚喜的發(fā)現(xiàn)多了一個(gè)npm(恩，買一送一)——畢竟現(xiàn)在一個(gè)語言不帶上“包管理”都不好意思說自己是“現(xiàn)代編程語言了”。

首先我們需要一個(gè)符合npm標(biāo)準(zhǔn)的工程

npm的規(guī)范很簡(jiǎn)單，只要你有一個(gè)package.json的配置文件就可以了，我們通過npm init來幫我們生成了一個(gè)。接下來用編輯器打開package.json就行了。

你可能已經(jīng)猜出了了很多東西(沒猜到?請(qǐng)瀏覽npmjs.com上的package.json來理解每個(gè)配置項(xiàng)的含義)。我們重點(diǎn)關(guān)注script，它可以讓我們利用npm執(zhí)行命令行(Shell)，我來修改一下代碼

然后執(zhí)行

以“>”開頭的輸出是npm的日志，最后的一句話才是“echo”執(zhí)行的結(jié)果。

三、初探webpack

1. 前期準(zhǔn)備

為了便于實(shí)驗(yàn)我準(zhǔn)備了兩個(gè)文件——index.js、index.html

index.html

index.js

用瀏覽器打開index.html就可以看到彈出的對(duì)話框了。

2. 初探Webpack

webpack是npm的一個(gè)標(biāo)準(zhǔn)庫，所以通過npm安裝它，指定--save-dev參數(shù)會(huì)自動(dòng)修改package.json添加依賴(npm會(huì)在當(dāng)前目錄創(chuàng)建一個(gè)node_modules文件夾，webpack和它的依賴都放在這里，你如果膽子大進(jìn)去看一下目錄吧。恩，就是這么神奇。。就是這么多依賴~~~~)。

安裝完成后package.json被添加了webpack的依賴關(guān)系。(dev不用猜你也知道了，這是“開發(fā)環(huán)境”依賴，npm在執(zhí)行打包的時(shí)候不會(huì)把它復(fù)制到生產(chǎn)環(huán)境，也就是說webpack其實(shí)是一個(gè)“開發(fā)工具”。)

webpack提供了一個(gè)命令行腳本路徑是node_modules/webpack/bin/webpack.js，我們可以直接在shell中執(zhí)行這個(gè)js文件。(打開它你會(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

下面修改代碼，在頁面中放入一個(gè)按鈕，通過jQuery綁定按鈕的Click事件，點(diǎn)擊之后彈出Hello。首先需要添加jQuery依賴，通過--save讓npm保存jQuery依賴，這里沒有執(zhí)行dev所以jQuery會(huì)被帶到生產(chǎn)環(huán)境

index.html

index.js

特別解釋一下第一句，這個(gè)是JavaScript的“模塊化”。JavaScript語言沒有模塊(或者叫“包”)、類等模塊化的概念這就給大家留下了很多想象空間，nodejs定義了require用來支持模塊化，通過這個(gè)語句會(huì)自動(dòng)引入jquery.js文件(讀取node_modules/jquery/package.json中的main字段)——這就是CommonJS。但是NodeJS不能工作在瀏覽器段，于是就有了瀏覽器端的“模塊化”——AMD、CMD之類的。時(shí)至今日ES6已經(jīng)作為JavaScript的新規(guī)范被大家接受，它終于引入了模塊化的語法——import xx from xx。

webpack同時(shí)支持CommonJS、ES6兩種語法，打包的時(shí)候會(huì)把所有的JavaScript和相關(guān)資源重新組合(比如合并JavaScript文件，合并小圖片，合并CSS)，我們可以選擇一次性加載所有JavaScript也可以通過插件分成若干個(gè)Chunk加載。

在webpack中兩種語法沒有什么本質(zhì)區(qū)別，我習(xí)慣性的會(huì)選擇require作為主要的方式，它可以指定完整路徑名非常便于兼容非npm模塊，還可以引入css文件、圖片，寫法也更加清晰。項(xiàng)目里有ES6的時(shí)候我會(huì)選擇用import語法。

繼續(xù)執(zhí)行webpack生成build.js，這次我們會(huì)看到一些關(guān)于jquery的信息。

打開頁面刷新、點(diǎn)擊、程序是正常工作的，打開buildle.js看一下是不是發(fā)現(xiàn)webpack把jquery.js和我們的代碼合并到一起了?

4. 自動(dòng)化

上面我們編輯完代碼之后還需要自己執(zhí)行一下webpack，刷新頁面。我們希望編輯index.js后希望可以自動(dòng)觸發(fā)webpack編譯輸出dist/build.js，為了實(shí)現(xiàn)這個(gè)必須引入兩個(gè)東西

webpack.config配置文件
webpack-dev-server插件

一直來我們都是通過命令行指定“源JavaScript”和“目標(biāo)JavaScript”，現(xiàn)實(shí)中我們一般是通過配置文件指定的就是——webpack.config.js

現(xiàn)在執(zhí)行node_modules/webpack/bin/webpack.js不加參數(shù)，webpack就會(huì)使用這個(gè)配置文件了。每次都輸入這么長的名字也是比較煩的，我們可以通過npm來調(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這里我們直接寫一個(gè)webpack就行了。(webpack其實(shí)是寫成node_modules/webpack/bin/webpack.js的縮寫)

通過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)文件寫到硬盤中而是在內(nèi)存里，此處指定輸出的文件是bundle.js，如果不指定publicPath，我們?cè)L問它的路徑應(yīng)該是localhost:3000/bundle.js。訪問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命令