【譯】十五分鐘，學習 Webpack

• 原文地址：Learn Webpack in 15 Minutes
• 原文做者：Danny Markov
• 譯者：Wpeach

因爲 JavaScript 應用程序的複雜性不斷增長，構建工具已成爲 web 開發中不可或缺的一部分。Bundlers 容許咱們去打包、編譯和管理現代 web 項目須要的衆多資源文件和依賴庫。

在本教程中，咱們將瞭解 webpack，一個強大的開源打包和預處理器，能夠處理大量複雜多樣的任務。咱們將向您展現如何去編寫 modules， bundle 代碼和使用一些 loader 插件。本教程爲 webpack 初學者設計的，要求有一些 JavaScript 基礎。

爲何選擇 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 能夠看到：

在咱們的 entry 和 greeter 模塊已經編譯成一個名爲 bundle.js 的文件，且已經在瀏覽器生效。這是迄今爲止發生事情的簡單流程圖。

4. 須要的庫

咱們想要讓咱們的應用程序在一週中的某一天問候用戶，咱們能夠直接在咱們的 greeter 模塊引入 moment.js。

首先，咱們須要經過 npm 來安裝這個庫

npm install moment --save
複製代碼

在咱們再次打包更新以後，在瀏覽器的控制檯咱們將收到一下信息：

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

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

---

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 啓動後，它將在命令行顯示一個警告列表(那些咱們所忽略的文件)

由於 moment.js 位於 node_modules 文件中，它不會被 JSHint loader 檢測。

延伸閱讀

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

接下來，咱們計劃在本教程中添加第二部分，說明如何使用 CSS 模塊和其它更高級的功能。在此期間，若是你想要學習更多關於 webpack 的信息（還有更多），咱們推薦你閱讀這些很棒的資源

• webpack.js.org - webpack 的官方網站，裏面有不少的指南和文檔。
• Awesome webpack - webpack 資源彙總
• Webpack Example - 各類webpack配置的列表