webpack學(xué)習(xí)--webpack經(jīng)典7分鐘入門教程
一.什么是 Webpack
Webpack 是一個模塊打包器。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源。
webpack模式圖
二.為什么使用webpack
市面上已經(jīng)存在的模塊管理和打包工具并不適合大型的項目，尤其單頁面 Web 應(yīng)用程序。最緊迫的原因是如何在一個大規(guī)模的代碼庫中，維護(hù)各種模塊資源的分割和存放，維護(hù)它們之間的依賴關(guān)系，并且無縫的將它們整合到一起生成適合瀏覽器端請求加載的靜態(tài)資源。而webpack有以下幾個優(yōu)點：
1.將依賴樹拆分成按需加載的塊：Webpack 有兩種組織模塊依賴的方式，同步和異步。異步依賴作為分割點，形成一個新的快。在優(yōu)化了依賴樹后，每一個異步區(qū)塊都作為一個文件被打包。
2.初始化加載的耗時盡量少：Webpack 使用異步 I/O 和多級緩存提高運行效率，這使得 Webpack 能夠以令人難以置信的速度快速增量編譯。
3.各種靜態(tài)資源都可以視作模塊：Webpack 本身只能處理原生的 JavaScript 模塊，但是 loader 轉(zhuǎn)換器可以將各種類型的資源轉(zhuǎn)換成 JavaScript 模塊。這樣，任何資源都可以成為 Webpack 可以處理的模塊。
4.將第三方庫整合成模塊的能力：Webpack 有一個智能解析器，幾乎可以處理任何第三方庫，無論它們的模塊形式是 CommonJS、 AMD 還是普通的 JS 文件。甚至在加載依賴的時候，允許使用動態(tài)表達(dá)式 require("./templates/" + name + ".jade")。
5.自定義打包邏輯的能力：Webpack 還有一個功能豐富的插件系統(tǒng)。大多數(shù)內(nèi)容功能都是基于這個插件系統(tǒng)運行的，還可以開發(fā)和使用開源的 Webpack 插件，來滿足各式各樣的需求。
6.適合大項目，無論是單頁還是多頁的 Web 應(yīng)用
三.安裝webpack
首先要安裝 Node.js， Node.js 自帶了軟件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持，建議使用最新版 Node.js。
用 npm 安裝 Webpack：
$ npm install webpack -g
此時 Webpack 已經(jīng)安裝到了全局環(huán)境下，本課程中我們已裝好webpack，可以通過命令行 webpack -h 試試。
通常我們會將 Webpack 安裝到項目的依賴中，這樣就可以使用項目本地版本的 Webpack。
1.進(jìn)入項目目錄
2.確定已經(jīng)有 package.json，沒有就通過 npm init 創(chuàng)建
3.輸入命令 $ npm install webpack --save-dev 安裝 webpack 依賴
Webpack 目前有兩個主版本，一個是在 master 主干的穩(wěn)定版，一個是在 webpack-2 分支的測試版，測試版擁有一些實驗性功能并且和穩(wěn)定版不兼容，在正式項目中應(yīng)該使用穩(wěn)定版。
# 查看 webpack 版本信息 $ npm info webpack # 安裝指定版本的 webpack $ npm install webpack@1.12.x --save-dev
四.在項目中使用webpack
首先有一個靜態(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)建一個 JS 入口文件 entry.js：
// entry.js
pico entry.js
// 進(jìn)入編輯器輸入
document.write('It works.');
// 保存并退出
然后編譯 entry.js 并打包到 bundle.js，運行命令：
$ webpack ./entry.js bundle.js
如果成功，打包過程會顯示日志：
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]
在點擊訪問測試將會打開一個新的窗口。它應(yīng)該會顯示It works.。
注意：下面的課程中創(chuàng)建編輯文件都是用pico 文件名。
下一步，我們將把一些代碼移到一個額外的文件中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í)行成功，會顯示
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 會分析入口文件，解析包含依賴關(guān)系的各個文件。這些文件（模塊）都打包到 bundle.js 。Webpack 會給每個模塊分配一個唯一的 id 并通過這個 id 索引和訪問模塊。在頁面啟動時，會先執(zhí)行 entry.js 中的代碼，其它模塊會在運行 require 的時候再執(zhí)行。
五.Loader介紹和使用
Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進(jìn)行轉(zhuǎn)換。
Loader 可以理解為是模塊和資源的轉(zhuǎn)換器，它本身是一個函數(shù)，接受源文件作為參數(shù)，返回轉(zhuǎn)換的結(jié)果。這樣，我們就可以通過 require 來加載任何類型的模塊或文件，比如 CoffeeScript、 JSX、 LESS 或圖片。
loader 有以下這些特點：
1.Loader 可以通過管道方式鏈?zhǔn)秸{(diào)用，每個 loader 可以把資源轉(zhuǎn)換成任意格式并傳遞給下一個 loader ，但是最后一個 loader 必須返回 JavaScript。
2.Loader 可以同步或異步執(zhí)行。
3.Loader 運行在 node.js 環(huán)境中，所以可以做任何可能的事情。
4.Loader 可以接受參數(shù)，以此來傳遞配置項給 loader。
5.Loader 可以通過文件擴展名（或正則表達(dá)式）綁定給不同類型的文件。
6.除了通過 package.json 的 main 指定，通常的模塊也可以導(dǎo)出一個 loader 來使用。
7.Loader 可以訪問配置。
8.插件可以讓 loader 擁有更多特性。
9.Loader 可以分發(fā)出附加的任意文件。
我們想要在應(yīng)用中添加一個css文件。
WebPACK只能處理JavaScript本身，所以我們需要css-loader去處理 CSS。我們還需要style-loader去應(yīng)用這個樣式在CSS文件。
安裝 loader：
npm install css-loader style-loader
注意：安裝 loaders（只需要在本地安裝，不需 -g）將會創(chuàng)建一個 node_modules 文件夾，在哪里 loaders 將會激活。
我們要在頁面中引入一個 CSS 文件 style.css，首頁將 style.css 也看成是一個模塊，然后用 css-loader 來讀取它，再用 style-loader 把它插入到頁面中。
添加一個style.css文件
body {
background: blue;
}
修改 entry.js：
+ require("!style!css!./style.css"); // 載入 style.css
document.write(require("./content.js"));
重新編譯并更新您的瀏覽器看到藍(lán)色背景。
擴展名自動綁定loader
如果每次 require CSS 文件的時候都要寫 loader 前綴，是一件很繁瑣的事情。
我們可以根據(jù)模塊類型（擴展名）來自動綁定需要的 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)義,這樣寫才會成功的
webpack ./entry.js bundle.js --module-bind "css=style!css"
六.配置文件
Webpack 在執(zhí)行的時候，除了在命令行傳入?yún)?shù)，還可以通過指定的配置文件來執(zhí)行。默認(rèn)情況下，會搜索當(dāng)前目錄的 webpack.config.js 文件，這個文件是一個 node.js 模塊，返回一個 json 格式的配置信息對象，或者通過 --config 選項來指定配置文件。
我們想將配置選項移動到配置文件中，創(chuàng)建一個配置文件 webpack.config.js：
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /.css$/, loader: "style!css" }
]
}
};
現(xiàn)在我們僅僅運行:
webpack
如果完成成功，將會返回運行結(jié)果，該命令將嘗試WebPACK當(dāng)前目錄中加載文件webpack.config.js。
這里對Webpack的打包行為做了配置，主要分為幾個部分：
- entry：指定打包的入口文件，每有一個鍵值對，就是一個入口文件
- output：配置打包結(jié)果，path定義了輸出的文件夾，filename則定義了打包結(jié)果文件的名稱
- module：定義了對模塊的處理邏輯，這里可以用loaders定義了一系列的加載器，以及一些正則。當(dāng)需要加載的文件匹配test的正則時，就會調(diào)用后面的loader對文件進(jìn)行處理，這正是webpack強大的原因。
漂亮的輸出
如果該項目的增長，編譯可能需要更長的時間。所以我們要展示一些進(jìn)度條。我們想要的顏色…
我們可以這樣
webpack --progress --colors
七.插件
插件可以完成更多 loader 不能完成的功能。
插件的使用一般是在 webpack 的配置信息 plugins 選項中指定。
Webpack 本身內(nèi)置了一些常用的插件，還可以通過 npm 安裝第三方插件。
接下來，我們利用一個最簡單的 BannerPlugin 內(nèi)置插件來實踐插件的配置和運行，這個插件的作用是給輸出的文件頭部添加注釋信息。
修改 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')
]
}
然后運行 webpack，打開 bundle.js，可以看到文件頭部出現(xiàn)了我們指定的注釋信息：
/! This file is created by mutouren /
/**/ (function(modules) { // webpackBootstrap
/**/ // The module cache
/**/ var installedModules = {};
// 后面代碼省略......
一個 url-loader 來說，它會將樣式中引用到的圖片轉(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" } // 添加到這
]
}
};
注意后面那個limit的參數(shù)，當(dāng)你圖片大小小于這個限制的時候，會自動啟用base64編碼圖片。
我們還是運行
webpack
將會看到背景圖片已設(shè)置成功。
八.在 Webpack 中使用別名
模塊別名定義，方便后續(xù)直接引用別名，無須多寫長長的地址，比如我們現(xiàn)在想要把scripts/jquery.min.jsjquery壓縮文件打包.
別名（resolve.alias） 是 Webpack 的一個配置項，它的作用是把用戶的一個請求重定向到另一個路徑，例如通過修改 webpack.config.js 配置文件，jquery為別名加入：
resolve: {
alias: {
jquery: "./scripts/jquery.min.js"
}
}
例如我們之前不用別名，在entry.js中，想要把jquery打包
require('./scripts/jquery.min.js');
設(shè)置別名，就可以修改為
require('jquery');
這樣待打包的腳本中的 require('jquery'); 其實就等價于 require('./scripts/jquery.min.js'); 。通過別名的使用在本例中可以減少幾乎一半的時間。
我們把需要的jquery打包了，但是現(xiàn)在前臺頁面想要直接用還是不可以的，需要我們把jquery暴露出來。
你可能在全局中使用了一個壓縮版本的 jquery，為了修復(fù)你可以安裝這個暴露全局加載器
npm install expose-loader --save-dev
然后像下面這樣修改entry.js：
require('expose?$!jquery');
把$作為別名為jquery的變量暴露到全局上下文中。
現(xiàn)在我們在頁面就可以使用$，例如：
$('h1').text();
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
解決JS浮點數(shù)運算出現(xiàn)Bug的方法，需要的朋友可以參考一下2013-03-03
在 JavaScript 中，使用字符串連接有 幾 種方式：連接符（+）、反引號（`）、join()、concat()，這篇文章主要介紹了JS字符串拼接的幾種方式,需要的朋友可以參考下2023-01-01
小程序云開發(fā)如何實現(xiàn)圖片上傳及發(fā)表文字
這篇文章主要為大家詳細(xì)介紹了小程序云開發(fā)教程，如何實現(xiàn)圖片上傳及發(fā)表文字，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要為大家詳細(xì)介紹了javascript表單控件實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
本篇文章主要是對js控制input輸入字符方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
提起瀑布流布局想必大家并不陌生吧，其實呢？原理也就那樣，下面有個小例子，與大家分享2014-04-04
Bootstrap3 Grid system原理及應(yīng)用詳解
這篇文章主要為大家詳細(xì)介紹了Bootstrap3 Grid system原理及應(yīng)用,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章將和大家一起探討一下動態(tài)高度虛擬列表原理并指出常見虛擬列表采用累計高度方式存在缺點,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
js 通過html()及text()方法獲取并設(shè)置p標(biāo)簽的顯示值
這篇文章主要介紹了js 通過html()及text()方法獲取并設(shè)置p標(biāo)簽的顯示值,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了JS實現(xiàn)可拖曳、可關(guān)閉的彈窗效果,可實現(xiàn)點擊文字彈出可拖動的窗口,同時背景出現(xiàn)變暗的遮罩效果,點擊遮罩層即可關(guān)閉彈出,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09