【Webpack】1.入門及簡單使用

weixin_33840661發表於2017-12-21
Web

什麼是 webpack

   webpack 是德國開發者 Tobias Koppers 開發的模組載入器。

  在 webpack 中所有的檔案都將被當做模組使用。當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有的這些模組打包成一個或多個 bundle。如圖所示：
webpack能做什麼

與 Gulp/Grunt 對比

  webpack 與 Gulp/Grunt 是沒有對比性的,因為Gulp/Grunt是一種能夠優化前端的開發流程的工具，而 webpack 是一種模組化的解決方案。不過Webpack的優點使得Webpack在很多場景下可以替代Gulp/Grunt類的工具。

  Grunt和Gulp的工作方式是：在一個配置檔案中，指明對某些檔案進行類似編譯，組合，壓縮等任務的具體步驟，工具之後可以自動替你完成這些任務。

Grunt和Gulp工作圖

  webpack的工作方式是：把你的專案當做一個整體，通過一個給定的主檔案（如：index.js），Webpack將從這個檔案開始找到你的專案的所有依賴檔案，使用loaders處理它們，最後打包為一個（或多個）瀏覽器可識別的JavaScript檔案。

webpack工作圖

webpack的安裝及使用 （Demo1 Source）

  1. 通過 npm 全域性安裝 webapck
    $ npm install -g webpack
  1. 建立專案並初始化 package.json 檔案
    $ mkdir demo1 && cd demo1
    $ npm init
  1. 在專案中安裝 webpack
    $ npm install webpack --save-dev
--save-dev 是開發時候依賴的東西，--save 是釋出之後還依賴的東西
  1. 在專案中建立如下檔案結構
.        
├── index.html  // 顯示的網頁
├── main.js    // webpack 入口
└── bundle.js // 通過 webpack 命令生成的檔案，無需建立
  1. 通過命令對專案中依賴的js檔案進行打包
    # webpack 要打包的 js 檔名  打包後生成的js檔名
    $ webpack main.js bundle.js

  在webpack命令後面還可以加入以下引數

  • --watch 實時打包
  • --progress 顯示打包進度
  • --display-modules 顯示打包的模組
  • --display-reasons 顯示模組包含在輸出中的原因

  更多引數可以通過命令 webpack --help 檢視

相關文章