【譯】十五分鐘，學習 Webpack

W、peach發表於2019-01-24
Web

由於 JavaScript 應用程式的複雜性不斷增加，構建工具已成為 web 開發中不可或缺的一部分。Bundlers 允許我們去打包、編譯和管理現代 web 專案需要的眾多資原始檔和依賴庫。

在本教程中，我們將瞭解 webpack，一個強大的開源打包和前處理器，可以處理大量複雜多樣的任務。我們將向您展示如何去編寫 modules， bundle 程式碼和使用一些 loader 外掛。本教程為 webpack 初學者設計的，要求有一些 JavaScript 基礎。

webpack

為什麼選擇 Webpack？

就像 web 開發的其它方面一樣，構建工具的也沒有一個標準。現在開發者可以在 Webpack、Gulp、Bowserify、NPM scripts、Grunt 等類似的十餘種構建工具。所有這些工具在在底層實現有所不同，但總體還是非常相似的，所以大多數時候你可以根據個人喜好和開發的專案，來選擇合適的構建工具。

你可以通過以下優缺點，來判斷 webpack 是否合適：

優點：

  • 可以很好的用於單頁應用
  • 同時支援 require() 和 import 模組語法
  • 允許非常前沿的 code splitting 特性
  • 熱載入 可以讓 React、Vue.js 和其它類似框架的本地開發更快
  • 它是《2016 JavaScript 調查》中最受歡迎的構建工具

缺點：

  • 不適合 web 開發的初學者
  • 對於 CSS、圖片和其它非 JS 資原始檔時，需要先混淆處理
  • 文件可以再優化
  • 變化很大，甚至 2016 年的教程都已經算過時了

1. 安裝

安裝 webpack 最簡單的方式是通過包管理器。我們將使用 npm 你也隨意使用 Yarn 或其它熟悉的替代。不管是 npm 還是 Yarn，你都需要現有一個帶 Node.js 的執行環境和 package.json 檔案再繼續。

推薦區域性安裝（不帶 -g 標籤），確保每個人執行你的專案時都是一樣的 webpack 版本。

npm install webpack --save-dev
複製程式碼

一旦我們安裝完，最好通過 Node.js 指令碼來執行 webpack，可以在新增以下程式碼到你的 package.json：

//...
    "scripts": {
        "build": "webpack -p",
        "watch": "webpack --watch"
    },
//...
複製程式碼

現在我們可以通過在命令列輸入 npm run build 來讓 webpack 打包我們的檔案（-p 選項可以壓縮生產環境下打包後的程式碼）。執行 npm run watch 將啟動一個程式，當檢測到檔案更改時，會自動打包我們的檔案。

設定的最後一部分是告訴 webpack 要打包哪些檔案，推薦新建立一個配置檔案。

2. Webpack 配置檔案

在這我們看一下配置檔案最基礎的寫法，不要被誤導 - webpack 配置檔案非常強大，在不同的專案中變化很大，在某些情況下會變得非常複雜。

在你專案的根目錄下新增一個名為 webpack.config.js 的檔案。

webpack.config.js

var path = require('path');

module.exports = {
  entry: './assets/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
複製程式碼

entry 選項告訴webpack哪個是我們 Javascript 主檔案。配置 entry 有許多不同的策略，但在大多數情況一個入口就足夠了。

在 output 中我們指定打包的名稱和路徑。在 webpack 執行完後我們將把所有 JavaScript 放在一個名為 bundle.js 的檔案中，這個唯一的 script 檔案可以連結在我們的 HTML 檔案：

<script src="./dist/bundle.js"></script>
複製程式碼

這個設定足以讓我們開始，稍後我們會向其新增更多的內容，但首先讓我們先來看看模組是如何工作的。

3. Webpack 模組

Webpack 提供了多種使用模組的方法，大多數時候你可以選擇一個你喜歡的。 在這個教程中我們會使用到 ES6 的 import 語法。

我們想要新增一個模組來迎接我們的使用者，我們建立一個名為 greeter.js 檔案，將它匯出為一個簡單的函式

greeter.js

function greet() {
    console.log('Have a great day!');
};

export default greet;
複製程式碼

為了使用這個模組，我們必須引入它並在 entry 中呼叫它，你可以在 index.js 中看到配置檔案。

index.js

import greet from './greeter.js';

console.log("I'm the entry point");
greet();
複製程式碼

當我們 npm run build 執行打包時，在瀏覽器中開啟我們的 HTML 可以看到：

console-greet

在我們的 entry 和 greeter 模組已經編譯成一個名為 bundle.js 的檔案，且已經在瀏覽器生效。這是迄今為止發生事情的簡單流程圖。

webpack-flow

4. 需要的庫

我們想要讓我們的應用程式在一週中的某一天問候使用者，我們可以直接在我們的 greeter 模組引入 moment.js。

首先，我們需要通過 npm 來安裝這個庫

npm install moment --save
複製程式碼

在我們再次打包更新之後，在瀏覽器的控制檯我們將收到一下資訊：

weekday-greet

這時我們的流程圖是這樣的：

/webpack-flow-2

注意，在引入庫時有更高階的用法，不在本文章的範圍內，你可以點這瞭解更多。

5.Loaders

Loader 是 webpack 在打包過程中執行任務對檔案進行預處理或後處理的方式。比如它可以編譯 TypeScript, 載入 Vue.js 元件，渲染模板等等。大多數 loaders 是社群編寫的，受歡迎的 loaders 清單可以看這裡

假設我們想要新增一個 linter 到我們的專案中去檢查我們 JavaScript 程式碼的錯誤。 我們可以引入 JSHint loader 來實現，它可以捕獲各種不良實踐和語法錯誤。

首先我們需要安裝 JSHint 和 webpack 的 JSHint loader:

npm install jshint jshint-loader --save-dev
複製程式碼

之後我們需要在 webpack 配置檔案中新增一些程式碼，這將初始化 loader， 告訴它要檢查哪些型別的檔案，以及忽略哪些檔案。

webpack.config.js

var path = require('path');

module.exports = {
  entry: './assets/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // Add the JSHint loader
  module: {
    rules: [{
      test: /\.js$/, // Run the loader on all .js files
      exclude: /node_modules/, // ignore all files in the node_modules folder
      use: 'jshint-loader'
    }]
  }
};
複製程式碼

現在當 webpack 啟動後，它將在命令列顯示一個警告列表(那些我們所忽略的檔案)

terminal-warnings

因為 moment.js 位於 node_modules 檔案中，它不會被 JSHint loader 檢測。

webpack-flow

延伸閱讀

我們對 webpack 的介紹到此為止。 因為這是一個針對初學者的課程，所以我們嘗試只覆蓋最有用和應該知道的 webpack 概念。 我們希望這個教程有用，不要太混亂，就像標題所說的在十五分鐘內可以消化。

接下來，我們計劃在本教程中新增第二部分，說明如何使用 CSS 模組和其它更高階的功能。在此期間，如果你想要學習更多關於 webpack 的資訊（還有更多），我們推薦你閱讀這些很棒的資源

相關文章