15 分鐘學習 Webpack
構建工具已成為 Web 開發不可或缺的一部分，這主要是由於 JavaScript 應用程序不斷增加的複雜性。 Bundler 允許我們打包、編譯和組織現代 Web 項目所需的許多資產和庫。
在本教程中，我們將了解 webpack，它是一個強大的開源捆綁器和預處理器，可以處理大量不同的任務。我們將向您展示如何編寫模塊、捆綁代碼和使用一些加載器插件。本教程是為 webpack 的初學者設計的，但建議您具備一些 JavaScript 知識。
為什麼選擇 webpack？
就像 Web 開發的任何其他方面一樣，對於使用哪種構建工具沒有標準。目前，開發人員必須在 webpack、Gulp、Browserify、NPM 腳本、Grunt 和其他 10 種工具之間進行選擇。那裡有很多深入的比較，但所有這些工具都非常相似，所以大部分時間都歸結為個人喜好和你正在從事的項目。
以下是幫助您確定 webpack 是否適合您的工具的一些優缺點：
優點：
- 非常適合使用單頁應用程序
- 同時接受
require()和import模塊語法 - 允許非常高級的代碼拆分
- 使用 React、Vue.js 和類似框架加快開發速度的熱重載
- 2016 年 JavaScript 調查中最受歡迎的構建工具
缺點：
- 不適合網絡開發的初學者
- 使用 CSS 文件、圖像和其他非 JS 資源一開始會讓人困惑
- 文檔可能會更好
- 變化很大，甚至 2016 年的大多數教程都已經過時了
1。安裝
安裝 webpack 最簡單的方法是使用包管理器。我們將使用 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')
}
}; 條目 選項告訴 webpack 哪個是我們的主要 JavaScript 文件。配置入口點有很多不同的策略，但在大多數情況下，一個入口就足夠了。
在輸出 我們指定捆綁包的名稱和路徑。運行 webpack 後，我們將把所有的 JavaScript 放在一個名為 bundle.js 的文件中 .這是我們將在 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; 要使用這個模塊，我們必須導入它並在我們的入口點中調用它 ，如果你回頭看配置文件就是 index.js。
index.js
import greet from './greeter.js';
console.log("I'm the entry point");
greet();
現在，當我們使用 npm run build 運行捆綁程序時 ，然後在瀏覽器中打開我們的 HTML，我們會看到：
我們的入口點和我們的 greeter 模塊被編譯到一個名為 bundle.js 的文件中 它是由瀏覽器執行的。這是迄今為止發生的事情的簡單流程圖：
4。需要庫
我們希望我們的應用程序指定它在一周中的哪一天迎接用戶。為此，我們將直接將 moment.js 導入到我們的 greeter 模塊中來使用它。
首先我們需要通過 npm 安裝庫：
npm install moment --save
然後在我們的問候模塊中，我們只需像上一點導入本地模塊一樣導入庫：
greeter.js
import moment from 'moment';
function greet() {
var day = moment().format('dddd');
console.log('Have a great ' + day + '!');
};
export default greet; 在我們再次捆綁以應用更改後，在瀏覽器控制台中我們將看到以下消息：
我們的流程圖現在看起來像這樣：
5. 裝載機
加載器是 webpack 在打包期間執行任務的方式，並以某種方式對文件進行預處理或後處理。例如，他們可以編譯 TypeScript、加載 Vue.js 組件、渲染模板等等。大多數加載器都是由社區編寫的，流行的加載器列表可以在這裡查看。
假設我們想在我們的項目中添加一個 linter 來檢查我們的 JS 代碼是否有錯誤。我們可以通過包含 JSHint 加載器來做到這一點，它會捕獲各種不良做法和代碼異味。
首先我們需要安裝 JSHint 和 webpack JSHint loader：
npm install jshint jshint-loader --save-dev
之後，我們將在 webpack 配置文件中添加幾行代碼。這將初始化加載器，告訴它要檢查的文件類型以及要忽略的文件。
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 加載器 linted：
進一步閱讀
我們對 webpack 的介紹到此結束！由於這是給初學者的一課，我們試圖只涵蓋 webpack 最有用和必須知道的概念。我們希望本教程對您有所幫助，不要太混亂，並且在標題的 15 分鐘限制內。
在不久的將來，我們計劃在本教程中添加第二部分，解釋如何使用 CSS 模塊和其他更高級的功能。同時，如果你想了解更多關於 webpack 的信息（還有更多），我們建議你查看這些很棒的資源：
- webpack.js.org - 項目的官方網站，那裡有很多指南和文檔。
- Awesome webpack - webpack 資源的精選列表。
- Webpack 2 - 完整教程 - 近兩個小時的免費視頻教程。
- Webpack 示例 - 各種 webpack 配置的列表。
