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

什麼是 webpack

   webpack 是德國開發者 Tobias Koppers 開發的模塊加載器。

  在 webpack 中全部的文件都將被當作模塊使用。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部的這些模塊打包成一個或多個 bundle。如圖所示：

與 Gulp/Grunt 對比

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

  Grunt和Gulp的工做方式是：在一個配置文件中，指明對某些文件進行相似編譯，組合，壓縮等任務的具體步驟，工具以後能夠自動替你完成這些任務。

  webpack的工做方式是：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個（或多個）瀏覽器可識別的JavaScript文件。

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 查看