Webpack入門

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

在本教程中，我們將了解 webpack，一個(gè)強(qiáng)大的開源打包和預(yù)處理器，可以處理大量復(fù)雜多樣的任務(wù)。我們將向您展示如何去編寫 modules， bundle 代碼和使用一些 loader 插件。本教程為 webpack 初學(xué)者設(shè)計(jì)的，要求有一些 JavaScript 基礎(chǔ)。

<figcaption></figcaption>

為什么選擇 Webpack？

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

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

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

---

1. 安裝

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

推薦局部安裝（不帶 -g 標(biāo)簽），確保每個(gè)人運(yùn)行你的項(xiàng)目時(shí)都是一樣的 webpack 版本。

npm install webpack --save-dev
 

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

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

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

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

2. Webpack 配置文件

在這我們看一下配置文件最基礎(chǔ)的寫法，不要被誤導(dǎo) - webpack 配置文件非常強(qiáng)大，在不同的項(xiàng)目中變化很大，在某些情況下會(huì)變得非常復(fù)雜。

在你項(xiàng)目的根目錄下新增一個(gè)名為 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 選項(xiàng)告訴webpack哪個(gè)是我們 Javascript 主文件。配置 entry 有許多不同的策略，但在大多數(shù)情況一個(gè)入口就足夠了。

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

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

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

---

3. Webpack 模塊

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

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

greeter.js

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

為了使用這個(gè)模塊，我們必須引入它并在 entry 中調(diào)用它，你可以在 index.js 中看到配置文件。

index.js

import greet from './greeter.js';
console.log("I'm the entry point");
greet();
 

當(dāng)我們 npm run build 運(yùn)行打包時(shí)，在瀏覽器中打開我們的 HTML 可以看到：

在我們的 entry 和 greeter 模塊已經(jīng)編譯成一個(gè)名為 bundle.js 的文件，且已經(jīng)在瀏覽器生效。這是迄今為止發(fā)生事情的簡(jiǎn)單流程圖。

4. 需要的庫

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

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

npm install moment --save
 

在我們?cè)俅未虬轮螅跒g覽器的控制臺(tái)我們將收到一下信息：

這時(shí)我們的流程圖是這樣的：

注意，在引入庫時(shí)有更高級(jí)的用法，不在本文章的范圍內(nèi)，你可以點(diǎn)這了解更多。

---

5.Loaders

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

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

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

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

因?yàn)?nbsp;moment.js 位于 node_modules 文件中，它不會(huì)被 JSHint loader 檢測(cè)。

延伸閱讀

我們對(duì) webpack 的介紹到此為止。 因?yàn)檫@是一個(gè)針對(duì)初學(xué)者的課程，所以我們嘗試只覆蓋最有用和應(yīng)該知道的 webpack 概念。 我們希望這個(gè)教程有用，不要太混亂，就像標(biāo)題所說的在十五分鐘內(nèi)可以消化。

接下來，我們計(jì)劃在本教程中添加第二部分，說明如何使用 CSS 模塊和其它更高級(jí)的功能。在此期間，如果你想要學(xué)習(xí)更多關(guān)于 webpack 的信息（還有更多），我們推薦你閱讀這些很棒的資源

• webpack.js.org - webpack 的官方網(wǎng)站，里面有很多的指南和文檔。
• Awesome webpack - webpack 資源匯總
• Webpack Example - 各種webpack配置的列表

名稱欄目：Webpack入門
本文地址：http://www.muchs.cn/news4/103954.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、定制網(wǎng)站、軟件開發(fā)、移動(dòng)網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)