個人博客前端渣渣不定期分享自己所學的前端知識

使用webpack也有一段時間了，但是沒有系統的去學習，最近無心代碼，正好用這段時間系統地看一下webpack,借鑑一下前輩們的經驗，防止忘記，記錄下來。

什麼是webpack

Webpack 是一個開源的前端打包工具。Webpack 提供了前端開發缺乏的模組化開發方式，將各種靜態資源視為模組，並從它生成優化過的程式碼。

Webpack可以從終端、或是更改 webpack.config.js 來設定各項功能。

要使用 Webpack 前須先安裝 Node.js。Webpack 其中一個特性是使用載入器來將資源轉化成模組。開發者可以自訂載入器的順序、格式來因應專案的需求。

上面是來自wiki的解釋，簡單來説webpack 是一個模塊打包器。

它將根據模塊的依賴關係進行靜態分析，然後將這些模塊按照指定的規則生成對應的靜態資源。為前端開發人員提供了一種模組化的開發方式。webpack將開發過程中的各個js等文件進行打包成組件，可以説，在webpack中，所有資源都是模塊。各個模塊在使用的時候加載，相對於之前<script>的加載方式來説，webpack解決了像全局變量衝突，js必須按順序加載等問題，同時方便開發人員進行資源管理，上手後簡單易用。

安裝

由於webpack依賴於Node.js運行，所以在安裝webpack前要先安裝Node.js。

安裝完Node.js後，利用其包管理工具npm安裝webpack：

$ npm install webpack -g

這樣就將webpack安裝到了全局環境，可以運行

$ webpack -v(或-h)

來查看已安裝的webpack的版本號（或使用幫助）

在一般的開發環境中，我們會進入一個已經初始化的項目目錄，使用命令

$ npm install webpack --save-dev

來安裝webpack到項目中，之後就能夠在項目中的配置文件中來配置具體項目的webpack，方便與他人協同的開發，又不會與本地的全局配置產生衝突。

怎麼用

安裝以後當然就是使用啦，這邊我就不貼例子了，可以移步阮一峯的教程教程裏面的例子怎麼使用阮大已經講得很清楚了

ps.教程中有提到，一些例子要跑起來需要安裝依賴，要安裝這些依賴可以在clone的項目目錄下運行

$ npm install --save-dev

有關這方面的具體解釋可以到網上搜索一下有關npm的知識，這裏就略過了。

Loader

webpack默認只能加載js文件，要想加載其他資源文件，就需要使用loader進行轉換,轉換以後可以使用require進行加載

ps.loader與require的例子在上面阮大的教程中也有，具體使用可以進一步看看。

關於配置

webpack的具體工作方式，可以修改項目中的配置文件，文件一般是

webpack.config.js

具體配置方法需要對應到具體的項目實際當中，這一步我也沒有研究過，在這就先略去，以後有機會碰到了，再繼續往下延伸。

延伸閲讀

Loader

require

webAPP

單頁面應用