Webpack入門

2021-03-03 分類：網(wǎng)站建設

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

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

為什么選擇 Webpack？

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

你可以通過以下優(yōu)缺點，來判斷 webpack 是否合適：

優(yōu)點：

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

缺點：

不適合 web 開發(fā)的初學者
對于 CSS、圖片和其它非 JS 資源文件時，需要先混淆處理
文檔可以再優(yōu)化
變化很大，甚至 2016 年的教程都已經(jīng)算過時了

1. 安裝

安裝 webpack 最簡單的方式是通過包管理器。我們將使用 npm 你也隨意使用 Yarn 或其它熟悉的替代。不管是 npm 還是 Yarn，你都需要現(xiàn)有一個帶 Node.js 的運行環(huán)境和 package.json 文件再繼續(xù)。

推薦局部安裝（不帶 -g 標簽），確保每個人運行你的項目時都是一樣的 webpack 版本。

npm install webpack --save-dev

一旦我們安裝完，最好通過 Node.js 腳本來運行 webpack，可以在添加以下代碼到你的 package.json：

//...
 "scripts": {
 "build": "webpack -p",
 "watch": "webpack --watch"
 },
//...

現(xiàn)在我們可以通過在命令行輸入 npm run build 來讓 webpack 打包我們的文件（-p 選項可以壓縮生產(chǎn)環(huán)境下打包后的代碼）。運行 npm run watch 將啟動一個進程，當檢測到文件更改時，會自動打包我們的文件。

設置的最后一部分是告訴 webpack 要打包哪些文件，推薦新創(chuàng)建一個配置文件。

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 有許多不同的策略，但在大多數(shù)情況一個入口就足夠了。

在 output 中我們指定打包的名稱和路徑。在 webpack 運行完后我們將把所有 JavaScript 放在一個名為 bundle.js 的文件中，這個唯一的 script 文件可以鏈接在我們的 HTML 文件：

<script src="./dist/bundle.js"></script>

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

3. Webpack 模塊

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

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

greeter.js

function greet() {
 console.log('Have a great day!');
};
//在此我向大家推薦一個前端全棧開發(fā)交流圈：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 模塊已經(jīng)編譯成一個名為 bundle.js 的文件，且已經(jīng)在瀏覽器生效。這是迄今為止發(fā)生事情的簡單流程圖。

4. 需要的庫

我們想要讓我們的應用程序在一周中的某一天問候用戶，我們可以直接在我們的 greeter 模塊引入 moment.js。

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

npm install moment --save

在我們再次打包更新之后，在瀏覽器的控制臺我們將收到一下信息：

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

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

5.Loaders

Loader 是 webpack 在打包過程中執(zhí)行任務對文件進行預處理或后處理的方式。比如它可以編譯 TypeScript, 加載 Vue.js 組件，渲染模板等等。大多數(shù) loaders 是社區(qū)編寫的，受歡迎的 loaders 清單可以看這里

假設我們想要添加一個 linter 到我們的項目中去檢查我們 JavaScript 代碼的錯誤。我們可以引入 JSHint loader 來實現(xiàn)，它可以捕獲各種不良實踐和語法錯誤。

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

現(xiàn)在當 webpack 啟動后，它將在命令行顯示一個警告列表(那些我們所忽略的文件)

因為 moment.js 位于 node_modules 文件中，它不會被 JSHint loader 檢測。