溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
一.什么是 Webpack
Webpack 是一個(gè)模塊打包器。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源。
webpack模式圖
二.為什么使用webpack
市面上已經(jīng)存在的模塊管理和打包工具并不適合大型的項(xiàng)目，尤其單頁面 Web 應(yīng)用程序。最緊迫的原因是如何在一個(gè)大規(guī)模的代碼庫(kù)中，維護(hù)各種模塊資源的分割和存放，維護(hù)它們之間的依賴關(guān)系，并且無縫的將它們整合到一起生成適合瀏覽器端請(qǐng)求加載的靜態(tài)資源。而webpack有以下幾個(gè)優(yōu)點(diǎn)：
1.將依賴樹拆分成按需加載的塊：Webpack 有兩種組織模塊依賴的方式，同步和異步。異步依賴作為分割點(diǎn)，形成一個(gè)新的快。在優(yōu)化了依賴樹后，每一個(gè)異步區(qū)塊都作為一個(gè)文件被打包。
2.初始化加載的耗時(shí)盡量少：Webpack 使用異步 I/O 和多級(jí)緩存提高運(yùn)行效率，這使得 Webpack 能夠以令人難以置信的速度快速增量編譯。
3.各種靜態(tài)資源都可以視作模塊：Webpack 本身只能處理原生的 JavaScript 模塊，但是 loader 轉(zhuǎn)換器可以將各種類型的資源轉(zhuǎn)換成 JavaScript 模塊。這樣，任何資源都可以成為 Webpack 可以處理的模塊。
4.將第三方庫(kù)整合成模塊的能力：Webpack 有一個(gè)智能解析器，幾乎可以處理任何第三方庫(kù)，無論它們的模塊形式是 CommonJS、 AMD 還是普通的 JS 文件。甚至在加載依賴的時(shí)候，允許使用動(dòng)態(tài)表達(dá)式 require("./templates/" + name + ".jade")。
5.自定義打包邏輯的能力：Webpack 還有一個(gè)功能豐富的插件系統(tǒng)。大多數(shù)內(nèi)容功能都是基于這個(gè)插件系統(tǒng)運(yùn)行的，還可以開發(fā)和使用開源的 Webpack 插件，來滿足各式各樣的需求。
6.適合大項(xiàng)目，無論是單頁還是多頁的 Web 應(yīng)用
三.安裝webpack
首先要安裝 Node.js， Node.js 自帶了軟件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持，建議使用最新版 Node.js。
用 npm 安裝 Webpack：
$ npm install webpack -g
此時(shí) Webpack 已經(jīng)安裝到了全局環(huán)境下，本課程中我們已裝好webpack，可以通過命令行 webpack -h 試試。
通常我們會(huì)將 Webpack 安裝到項(xiàng)目的依賴中，這樣就可以使用項(xiàng)目本地版本的 Webpack。
1.進(jìn)入項(xiàng)目目錄
2.確定已經(jīng)有 package.json，沒有就通過 npm init 創(chuàng)建
3.輸入命令 $ npm install webpack --save-dev 安裝 webpack 依賴
Webpack 目前有兩個(gè)主版本，一個(gè)是在 master 主干的穩(wěn)定版，一個(gè)是在 webpack-2 分支的測(cè)試版，測(cè)試版擁有一些實(shí)驗(yàn)性功能并且和穩(wěn)定版不兼容，在正式項(xiàng)目中應(yīng)該使用穩(wěn)定版。
# 查看 webpack 版本信息 $ npm info webpack # 安裝指定版本的 webpack $ npm install webpack@1.12.x --save-dev
四.在項(xiàng)目中使用webpack
首先有一個(gè)靜態(tài)頁面 index.html，
<!-- index.html --> <html> <head> <meta charset="utf-8"> </head> <body> <script src="bundle.js"></script> </body> </html>
現(xiàn)在創(chuàng)建一個(gè) JS 入口文件 entry.js：
// entry.js
pico entry.js
// 進(jìn)入編輯器輸入
document.write('It works.');
// 保存并退出
然后編譯 entry.js 并打包到 bundle.js，運(yùn)行命令：
$ webpack ./entry.js bundle.js
如果成功，打包過程會(huì)顯示日志：
Hash: aeec068c58e1e78f0fb6
Version: webpack 1.12.9
Time: 70ms
Asset Size Chunks Chunk Names
bundle.js 1.48 kB 0 [emitted] main
[0] ./entry.js 87 bytes {0} [built]
在點(diǎn)擊訪問測(cè)試將會(huì)打開一個(gè)新的窗口。它應(yīng)該會(huì)顯示It works.。
注意：下面的課程中創(chuàng)建編輯文件都是用pico 文件名。
下一步，我們將把一些代碼移到一個(gè)額外的文件中content.js 并修改入口 entry.js：
// content.js pico content.js // 編輯內(nèi)容 module.exports = "It works from content.js.";
// 修改entry.js
//document.write('It works.');
document.write(require("./content.js")); // 添加content.js
編譯文件
$ webpack ./entry.js bundle.js
更新您的瀏覽器窗口，您應(yīng)該看到文本It works from content.js.
執(zhí)行成功，會(huì)顯示
Hash: ef96fed65f6d3ebc0dd7
Version: webpack 1.12.9
Time: 91ms
Asset Size Chunks Chunk Names
bundle.js 1.7 kB 0 [emitted] main
[0] ./entry.js 133 bytes {0} [built]
[1] ./content.js 97 bytes {0} [built]
Webpack 會(huì)分析入口文件，解析包含依賴關(guān)系的各個(gè)文件。這些文件（模塊）都打包到 bundle.js 。Webpack 會(huì)給每個(gè)模塊分配一個(gè)唯一的 id 并通過這個(gè) id 索引和訪問模塊。在頁面啟動(dòng)時(shí)，會(huì)先執(zhí)行 entry.js 中的代碼，其它模塊會(huì)在運(yùn)行 require 的時(shí)候再執(zhí)行。
五.Loader介紹和使用
Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進(jìn)行轉(zhuǎn)換。
Loader 可以理解為是模塊和資源的轉(zhuǎn)換器，它本身是一個(gè)函數(shù)，接受源文件作為參數(shù)，返回轉(zhuǎn)換的結(jié)果。這樣，我們就可以通過 require 來加載任何類型的模塊或文件，比如 CoffeeScript、 JSX、 LESS 或圖片。
loader 有以下這些特點(diǎn)：
1.Loader 可以通過管道方式鏈?zhǔn)秸{(diào)用，每個(gè) loader 可以把資源轉(zhuǎn)換成任意格式并傳遞給下一個(gè) loader ，但是最后一個(gè) loader 必須返回 JavaScript。
2.Loader 可以同步或異步執(zhí)行。
3.Loader 運(yùn)行在 node.js 環(huán)境中，所以可以做任何可能的事情。
4.Loader 可以接受參數(shù)，以此來傳遞配置項(xiàng)給 loader。
5.Loader 可以通過文件擴(kuò)展名（或正則表達(dá)式）綁定給不同類型的文件。
6.除了通過 package.json 的 main 指定，通常的模塊也可以導(dǎo)出一個(gè) loader 來使用。
7.Loader 可以訪問配置。
8.插件可以讓 loader 擁有更多特性。
9.Loader 可以分發(fā)出附加的任意文件。
我們想要在應(yīng)用中添加一個(gè)css文件。
WebPACK只能處理JavaScript本身，所以我們需要css-loader去處理 CSS。我們還需要style-loader去應(yīng)用這個(gè)樣式在CSS文件。
安裝 loader：
npm install css-loader style-loader
注意：安裝 loaders（只需要在本地安裝，不需 -g）將會(huì)創(chuàng)建一個(gè) node_modules 文件夾，在哪里 loaders 將會(huì)激活。
我們要在頁面中引入一個(gè) CSS 文件 style.css，首頁將 style.css 也看成是一個(gè)模塊，然后用 css-loader 來讀取它，再用 style-loader 把它插入到頁面中。
添加一個(gè)style.css文件
body {
background: blue;
}
修改 entry.js：
+ require("!style!css!./style.css"); // 載入 style.css
document.write(require("./content.js"));
重新編譯并更新您的瀏覽器看到藍(lán)色背景。
擴(kuò)展名自動(dòng)綁定loader
如果每次 require CSS 文件的時(shí)候都要寫 loader 前綴，是一件很繁瑣的事情。
我們可以根據(jù)模塊類型（擴(kuò)展名）來自動(dòng)綁定需要的 loader這樣寫require("./style.css")。
修改entry.js
- require("!style!css!./style.css");
+ require("./style.css");
document.write(require("./content.js"));
注意：-表示這行刪掉或者注釋掉，+表示新增的內(nèi)容。
編譯:
webpack ./entry.js bundle.js --module-bind "css=style!css"
注意：！在shell中有特殊意義，需要轉(zhuǎn)義,這樣寫才會(huì)成功的
webpack ./entry.js bundle.js --module-bind "css=style!css"
六.配置文件
Webpack 在執(zhí)行的時(shí)候，除了在命令行傳入?yún)?shù)，還可以通過指定的配置文件來執(zhí)行。默認(rèn)情況下，會(huì)搜索當(dāng)前目錄的 webpack.config.js 文件，這個(gè)文件是一個(gè) node.js 模塊，返回一個(gè) json 格式的配置信息對(duì)象，或者通過 --config 選項(xiàng)來指定配置文件。
我們想將配置選項(xiàng)移動(dòng)到配置文件中，創(chuàng)建一個(gè)配置文件 webpack.config.js：
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /.css$/, loader: "style!css" }
]
}
};
現(xiàn)在我們僅僅運(yùn)行:
webpack
如果完成成功，將會(huì)返回運(yùn)行結(jié)果，該命令將嘗試WebPACK當(dāng)前目錄中加載文件webpack.config.js。
這里對(duì)Webpack的打包行為做了配置，主要分為幾個(gè)部分：
漂亮的輸出
如果該項(xiàng)目的增長(zhǎng)，編譯可能需要更長(zhǎng)的時(shí)間。所以我們要展示一些進(jìn)度條。我們想要的顏色…
我們可以這樣
webpack --progress --colors
七.插件
插件可以完成更多 loader 不能完成的功能。
插件的使用一般是在 webpack 的配置信息 plugins 選項(xiàng)中指定。
Webpack 本身內(nèi)置了一些常用的插件，還可以通過 npm 安裝第三方插件。
接下來，我們利用一個(gè)最簡(jiǎn)單的 BannerPlugin 內(nèi)置插件來實(shí)踐插件的配置和運(yùn)行，這個(gè)插件的作用是給輸出的文件頭部添加注釋信息。
修改 webpack.config.js，添加 plugins：
var webpack = require('webpack');
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /.css$/, loader: 'style!css'}
]
},
plugins: [
new webpack.BannerPlugin('This file is created by mutouren')
]
}
然后運(yùn)行 webpack，打開 bundle.js，可以看到文件頭部出現(xiàn)了我們指定的注釋信息：
/! This file is created by mutouren /
/**/ (function(modules) { // webpackBootstrap
/**/ // The module cache
/**/ var installedModules = {};
// 后面代碼省略......
一個(gè) url-loader 來說，它會(huì)將樣式中引用到的圖片轉(zhuǎn)為模塊來處理，使用該加載器需要先進(jìn)行安裝：
npm install url-loader
修改style.css文件
body {
color:#fff;
background: url('./logo.png');
}
配置webpack.config.js文件
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /.css$/, loader: "style!css" },
{ test: /.(png|jpg)$/, loader: "url?limit=40000" } // 添加到這
]
}
};
注意后面那個(gè)limit的參數(shù)，當(dāng)你圖片大小小于這個(gè)限制的時(shí)候，會(huì)自動(dòng)啟用base64編碼圖片。
我們還是運(yùn)行
webpack
將會(huì)看到背景圖片已設(shè)置成功。
八.在 Webpack 中使用別名
模塊別名定義，方便后續(xù)直接引用別名，無須多寫長(zhǎng)長(zhǎng)的地址，比如我們現(xiàn)在想要把scripts/jquery.min.jsjquery壓縮文件打包.
別名（resolve.alias） 是 Webpack 的一個(gè)配置項(xiàng)，它的作用是把用戶的一個(gè)請(qǐng)求重定向到另一個(gè)路徑，例如通過修改 webpack.config.js 配置文件，jquery為別名加入：
resolve: {
alias: {
jquery: "./scripts/jquery.min.js"
}
}
例如我們之前不用別名，在entry.js中，想要把jquery打包
require('./scripts/jquery.min.js');
設(shè)置別名，就可以修改為
require('jquery');
這樣待打包的腳本中的 require('jquery'); 其實(shí)就等價(jià)于 require('./scripts/jquery.min.js'); 。通過別名的使用在本例中可以減少幾乎一半的時(shí)間。
我們把需要的jquery打包了，但是現(xiàn)在前臺(tái)頁面想要直接用還是不可以的，需要我們把jquery暴露出來。
你可能在全局中使用了一個(gè)壓縮版本的 jquery，為了修復(fù)你可以安裝這個(gè)暴露全局加載器
npm install expose-loader --save-dev
然后像下面這樣修改entry.js：
require('expose?$!jquery');
把$作為別名為jquery的變量暴露到全局上下文中。
現(xiàn)在我們?cè)陧撁婢涂梢允褂?，例如：
$('h2').text();
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼