webpack 3 零基礎入門教程 #1 - 介紹

1. webpack 是什麼?

先來講一下 webpack 是什麼。

webpack 的官方對它是這樣定義的：

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

中文的大概意思是說：

webpack 能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到 JavaScript 模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript 等），並將其轉換和打包爲合適的格式供瀏覽器使用。

用大白話能夠這樣說：

webpack是一個前端模塊化方案，更側重模塊打包，咱們能夠把開發中的全部資源（圖片、js 文件、css 文件等）都當作模塊，經過 loader（加載器）和 plugins（插件）對資源進行處理，打包成符合生產環境部署的前端資源。

若是這樣還不明白的話，咱們來講下來龍去脈。

在當今的社會，做爲 web 開發，會愈來愈意識到前端的重要性，隨着 HTML五、 CSS三、 ES6 各類技術的發展，前端的開發愈來愈龐大。甚至有些應用就是單頁面應用(SPA)，純 JavaScript 開發，JavaScript 文件的管理也是一個問題。JavaScript 模塊化編程，已經成爲一個迫切的需求，這就出現了 JavaScript 的模塊解決方案，之前是用 requirejs 或 seajs，而如今則是用 webpack。

舉個例子，不少人開發了各類優秀的 JavaScript 模塊或組件，咱們不想重複發明輪子，而是想直接利用別人的模塊，就是相似 require 或 include 這樣的機制，把別人的模塊引入進來，可是 JavaScript 又沒有 類或包 這樣的概念，那應該如何作呢？

如何去引入別人的模塊？引入以後保證各類依賴關係不出錯？這就是 webpack 要解決的問題。

模塊化的概念咱們理解了，那如何理解 打包 這個詞呢？

其實，模塊化的問題解決以後，webpack 就能把各類資源模塊打包合併成一個文件輸出給瀏覽器。在打包的過程當中還能對這些資源進行處理，好比壓縮減小體積，把 sass 編譯成 css, coffee 編譯成 js。因此它在某些程度上，跟 grunt/gulp 的功能有些相同。至於與 grunt/gulp 的不一樣之處，咱們下面會講到。

2. 與 grunt/gulp 的區別

grunt/gulp 的定義是 Task Runner。它有點像 ruby 的 Rake或 Thor，若是你不懂 ruby，那 c/cpp語言的 make，這應該總知道吧。它是一種寫任務的工具，只是 grunt/gulp 是用 JavaScript 來寫 task 而已。

grunt/gulp 強調的是前端開發的工做流程，咱們能夠經過配置一系列的 task，定義 task 處理的事務（例如文件壓縮合並、雪碧圖、啓動 server、版本控制等），而後定義執行順序，來讓 grunt/gulp 執行這些 task，從而構建項目的整個前端開發流程。

const gulp = require('gulp');
const babel = require('gulp-babel');

// gulp.src 會指定源文件，而後經過 pipe 函數把內容傳給下個處理方法，最後 gulp.dest 是輸出處理後的文件內容。
gulp.task('default', () =>
    gulp.src('src/app.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('dist'))
);
複製代碼

打個比方，若是你的工程模塊依賴很簡單，不須要把 js 或各類資源打包，只須要簡單的合併、壓縮，那就不須要 webpack。grunt/gulp 就夠用了。反過來，若是你的工程龐大，頁面中使用了不少庫（SPA很容易出現這種狀況），那就能夠選擇使用 webpack，由於這樣既能作到模塊化管理，也能作到 grunt/gulp 的一些功能，好比壓縮，轉化 coffeescript 爲 js 等。

gulp 也能和 webpack 結合起來用，gulp 裏面有個 webpack-stream 插件。就是讓 webpack 專門去作 module dependency 的事情, 生成一個 bundle.js 文件，而後再用 gulp 去作一些其餘雜七雜八 minify, uglify 的事情。 後來人們發現 webpack 有個 plugins 的選項， 能夠用來進一步處理通過 loader 生成的 bundle.js，因而有人寫了對應的插件， 因此 minify/uglify, 生成 hash 的工做也能夠轉移到 webpack 自己了，擠掉了 gulp 這部分的市場份額。 再後來你們有發現 npm/package.json 裏面的 scripts 原來好好用啊，調用任務的時候就直接寫一個簡單的命令，由於 gulp 也不就是各類插件命令的組合呀，大部分狀況下愈來愈不須要 gulp/grunt 之類的了。 因此你如今看到的不少新項目都是package.json 裏面 scripts 寫了一堆，外部只須要一個 webpack 就夠了。（摘自網絡 segmentfault.com/q/101000000…

最後總結一下：

雖然都是前端自動化構建工具，但看他們的定位就知道不是對等的。

grunt/gulp 嚴格上講，模塊化不是他強調的東西，他旨在規範前端開發流程。

webpack 更是明顯強調模塊化開發，而那些文件壓縮合並、預處理等功能，不過是他附帶的功能。

3. 跟 Browserify 相比

webpack 與其和 grunt/gulp 相比較，還不如跟 Browserify 比較，由於它們二者更相近，不過好像 Browserify 應該被 webpack 代替了吧，我對 Browserify 瞭解也很少，在此就不細說了。

4. 優點

webpack 不只僅能處理 js, 也能處理 css, 也能處理 html，甚至是圖片等各類前端資源。

它開發便捷，僅僅使用一個配置文件，就能替代部分 grunt/gulp 的工做，好比打包、壓縮混淆、圖片轉 base64等。

擴展性強，插件機制完善。

5. 爲何要學習 webpack

如今最流行的 react、vue、angular 等技術，你要學習和使用它們，不免會碰到 webpack，由於通常都會用 webpack 來構建前端的開發環境，這樣，咱們還有什麼理由不學習呢？