半個小時，學習 Webpack 技术頭條網

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

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

為什麼選擇 Webpack？

就像 web 開發的其它方面一樣，構建工具的也沒有一個標準。現在開發者可以在 Webpack、Gulp、Bowserify、NPM>

你可以通過以下優缺點，來判斷 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 的文件中，這個唯一的>

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

3. Webpack 模塊

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

我們想要添加一個模塊來迎接我們的用戶，我們創建一個名為 greeter.js 文件，將它導出為一個簡單的函數

greeter.js

function greet() {
 console.log('Have a great day!');
};
//在此我向大家推薦一個前端全棧開發交流圈：582735936 突破技術瓶頸，提升思維能力 

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'
 }]
 }
};
//在此我向大家推薦一個前端全棧開發交流圈：582735936 突破技術瓶頸，提升思維能力