webpack入門很簡單

什麼是webpack

使用webpack需要安裝什麼

乙個簡單卻又比較全面的例子

為什麼會用webpack

隨著大前端的來臨，傳統的mvc架構中的前端只是乙個會做互動和靜態頁的切圖仔，但隨著web架構的變遷，出於專案日益複雜和業務擴充套件，mv*架構逐漸占領了web的光環，其中三大劍客便是angular,react和vue，在使用這些js框架開始時，出於**可維護性的角度出發，不會再像以往那樣使用標籤引入的方式，而是採用了一種模組的方式去開發，webpack是其中典型的代表。

webpack是什麼

webpack是乙個模組打包工具，在開發中，各種各樣的資源都可以認為是一種獨特的模組資源，比如css，js，png，json等。而我們通過webpack，可以將這些資源打包壓縮在指定的檔案中，需要注意的是，webpack本身是支援js資源的，但我們可以通過loader載入器，來打包除了js之外的資源。talk is cheap，let's do it.

在使用webpack打包資源前，我們先來看看怎麼搭建webpack開發環境

安裝nodejs和npm

nodejs是一種能讓js在伺服器上跑的執行環境，小夥伴們再也不怕只會js想寫後台又得學其他後台語言而煩惱了，npm是nodejs的包管理器，很多社群大神寫好的**，我們想用怎麼辦，沒關係，只要大神把他們的**上傳到npm，我們可以方便的使用，npm install ***,接下來就是可以在我們的**上使用了。

安裝nodejs

npm -v

node -v

我們會看到下面的資訊

到這裡我們的開發環境就安裝好了，接下來開始實戰吧

實戰全域性安裝webpack

npm install -g webpack

初始化我們的資料夾

找到我們的開發目錄，在cmd中依次執行

cd d:wampwwwworkspace

d:mkdir webpack_demo

接下來我們會在資料夾中看見我們的目錄

建立資料夾

接下來我們進入切換到我們建立的目錄，使用npm初始化我們開發目錄

cd webpack_demo

npm init

初始化過程中需要我們填寫一下開發目錄的一些資訊，沒有特殊的要求下，我們就是全部選選擇預設，接下來我們就會看見資料夾中多了package.json,這個資料夾是用來記錄我們在npm倉庫中安裝了什麼**包和定義一些npm命令用的，現在我們暫時用不著

建立資源模組

接下來我們簡單的建立三個檔案

src/hello.js

main.js

index.html

接下來我們在這三個檔案中寫入一些基本內容

index.html很簡單，唯一需要注意的就是在代價底部多了乙個引入檔案bundle.js，這是我們接下來使用webpack打包出阿里的檔案。

hello.js前端熟悉的小夥伴們就很好理解了，這裡建立了乙個p標籤節點，給這個節點賦值，讓剛剛接觸webpack人來說，這裡比較陌生的就是

module.exports = function() {}

這是什麼東西？簡單來說，我們使用webpack開發中，我們需要將各種各樣的資源暴露給其他模組使用，在這裡使用的是commonjs規範，將乙個函式暴露給其他模組，這個函式返回的是乙個p標籤節點。隨便和大家說下，除了commonjs模組開發規範，還有es6規範和amd規範，有興趣可以去了解了解，webpack預設支援commonjs規範。

main.js，我們在hellojs模組匯出了乙個函式，我們怎麼使用這個函式呢，mainjs就是我們們接下來要寫的，在mainjs中我們同樣的使用commonjs規範，將hellojs暴露出來的函式匯入進來，匯入到該檔案的text物件中

使用webpack打包

寫好了個個模組的資源，我們終於可以使用webpack來打包他們了，我們先看看webapck的基本打包命令

webpack

entry file是當前cmd目錄下入口檔案的位址，在這個示例中mainjs為各種各樣資源模組的入口，也是唯一的入口，所有的資源最終都會匯入到這個入口檔案中，這裡是將hellojs暴露出來的函式匯入到mainjs入口檔案中

bundled file是各種各樣的資源匯入到入口檔案mainjs中，通過webpack打包生成能夠被html檔案直接引入的js檔案，在這裡我們將資源打包到dist目錄下的bundlejs中

webpack打包

執行了這段命令後，我們可以看到dist資料夾下生成了bundlejs檔案，接下來是不是迫不及待看看效果，我們使用瀏覽器開啟index.html

開啟效果

perfect，完美執行，在這裡我們已經會簡單使用webpack打包資源了，但每次打包我們都輸入

定義webapck命令

長長的**是不是過於麻煩了，我們可以定義webpack的命令，只需要我們執行webpack便會自動執行打包過程，首先我們建立webpack.config.js檔案,目錄中我們制定了入口檔案和打包生成的檔案，單我們執行webpack命令時，webpack會找到webpack.config.js，執行這檔案定義好的命令

webpack.config.js

接下來我們把dist目錄下的bundlejs刪了，執行

webpack

使用npm命令

bundlejs再一次出現在這個資料夾中了，是不是方便多了，這樣就夠了嗎？當然不是，記得我們開始講到，package.json中除了記錄一下安裝包的記錄外，還可以定義一些npm命令，來執行執行webpack命令

package.json

我們再次刪了dist目錄下的檔案，我們在cmd執行

npm start

發現bundlejs又出現了。

webpack入門很簡單

mysql很簡單 MySQL入門很簡單

簡單入門webpack

linux入門很簡單》總結

webpack入門很簡單

mysql很簡單 MySQL入門很簡單

簡單入門webpack

linux入門很簡單》總結

相關推薦