Webpack學(xué)習(xí)總結(jié)

此文只是自己學(xué)習(xí)webpack的一些總結(jié)，方便自己查閱，閱讀不變，非常抱歉！！

下載安裝：

Win10

打開命令行工具創(chuàng)建文件夾：mkdir webpack-test（文件名不能叫webpack，不然會(huì)報(bào)錯(cuò)無法下載webpack）

進(jìn)入文件夾：cd webpack-test

初始化init：npm init；（生成一個(gè)package.json文件）

下載安裝webpack：npm install webpack --save-dev；（依賴注入）

嘗試使用：

在webpack-test目錄下新建一個(gè)hello.js文件，隨便輸入一些代碼，如：

在命令行中輸入webpack hello.js hello.boudle.js：

看到如上結(jié)果說明已經(jīng)打包成功，文件目錄下會(huì)生成一個(gè)hello.boudle.js文件：

Hash：Hash值；

Version：webpack版本號(hào)；

Time：打包所花費(fèi)的時(shí)間；

Asset：生成的文件；

Size：文件大小；

Chunks：打包的分塊；

Chunk Names：打包的塊名稱；

下一步，新建一個(gè)world.js文件，然后在hello.js中對(duì)其引用，webpack支持ES6、Commonjs、AMD模塊語法：

輸入webpack hello.js hello.boudle.js：

在hello.boudle.js中，/* 0 */，/* 1 */為模塊編號(hào)，webpack將打包前文件的引用替換為webpack內(nèi)置的require：

新建一個(gè)style.css文件，在hello.js中對(duì)其引用，然后再次運(yùn)行打包命令：

發(fā)現(xiàn)css文件打包失敗，提示你需要一個(gè)loader來處理這個(gè)（css）文件類型；

使用npm install css-loader style-loader --save-dev 安裝處理css文件的loader，然后運(yùn)行

webpack hello.js hello.boudle.js：

它還是說你需要一個(gè)loader來處理這個(gè)類型的文件，因?yàn)殡m然你安裝了loader，但是在文件中沒有去制定要使用這個(gè)loader來處理這種類型的文件：

css-loader!就是說這個(gè)文件需要經(jīng)過css-loader的處理，然后再次運(yùn)行打包：

這樣就完成了css文件的打包；

新建一個(gè)hello.html文件，引入打包后的文件：

修改hello.js，執(zhí)行hello函數(shù)：

執(zhí)行打包，瀏覽器中打開html文件：

在css文件中加上背景色，然后重新打包運(yùn)行：

你會(huì)發(fā)現(xiàn)并沒有生成紅色背景，這時(shí)你需要使用style-loader對(duì)引入的css文件進(jìn)行處理：

然后打包運(yùn)行，就可以了：

你會(huì)發(fā)現(xiàn)瀏覽器中head標(biāo)簽中多了一個(gè)style標(biāo)簽，這是因?yàn)閏ss-loader是用來處理css文件，style-loader是將css-loader處理后的文件新建一個(gè)style標(biāo)簽插入到html里面；

css-loader也可以在命令行中指定，命令行輸入webpack --help可以看到webpack的一些參數(shù)，刪除require時(shí)指定的loader ，打包時(shí)將命令改為：webpack hello.js hello.boudle.js --module-bind “css=style-loader!css-loader”，發(fā)現(xiàn)也可以成功，并沒有報(bào)錯(cuò)，注意windows下只能使用雙引號(hào)，不然會(huì)報(bào)錯(cuò)，webpack是從右往左解析，所以要先使用css-loader處理然后再交給style-loader；

加上--watch參數(shù)可以使每次文件改變的時(shí)候自動(dòng)執(zhí)行打包；

--progress可以看到打包過程；

--display-modules可以看到打包模塊，會(huì)列出每個(gè)文件通過哪個(gè)loader處理；

--display-reasons為告訴你為什么要打包這個(gè)模塊；

配置webpack

新建一個(gè)webpack-test2文件，init初始化，npm install webpack --save-dev依賴安裝webpack，新建一個(gè)src文件，新建一個(gè)dist文件，根目錄下創(chuàng)建一個(gè)html文件，引入boudle.js（打包后的文件名）：

src目錄下創(chuàng)建一個(gè)script文件夾一個(gè)style文件夾用于放置js，css文件，根目錄下創(chuàng)建一個(gè)webpack.config.js（官網(wǎng)上有對(duì)config的詳細(xì)說明）文件：

entry：打包入口，從哪個(gè)文件開始，假設(shè)為上述文件；

output：打包后的文件；

filename：打包后的文件名（加上路徑）；

output中還有一個(gè)path和一個(gè)publicPath屬性：

path代表路徑，publicPath為要替換的路徑，如上線網(wǎng)址：

webpack會(huì)將path替換為publicPath：

script文件夾中新建一個(gè)main.js，寫一個(gè)空函數(shù)，然后命令行輸入webpack打包：

這樣就打包成功了；

如果將webpack.config.js文件名修改webpack.dev.config.js（或其他）,可使用命令webpack --config webpack.dev.config.js；

也可以在package.json文件中的scripts下進(jìn)行配置：

然后命令行使用npm run webpack：

entry

entry接受字符串（單個(gè)文件），數(shù)組和對(duì)象三種方式；

在script目錄下新建一個(gè)a.js，寫一個(gè)a的空函數(shù)，然后修改config.js中的entry：

運(yùn)行npm run webpack：

打包成功；

將entry改為對(duì)象方式：

運(yùn)行npm run webpack：

提示多個(gè)資源打包成了相同的文件名，然后前面的被覆蓋，這個(gè)時(shí)候要使用output中的占位符，[name]指entry對(duì)象中的key，[hash]打包的Hash值，[chunkhash]每一個(gè)chunk的hash值；

修改config文件：

改為chunkhash，運(yùn)行：

和上面不同的是兩個(gè)文件hash值不同，chunkhash可以認(rèn)為是版本號(hào)，只有當(dāng)文件有改變的時(shí)候hash值才會(huì)改變，下面改變a.js文件，再運(yùn)行打包：

可以發(fā)現(xiàn)a.js打包后的文件hash值變化了；

index.html中引入的文件是boudle.js，但是我們打包后的文件名可能是不確定的，所以我們需要引入webpack的插件：html-webpack-plugin，首先還是依賴注入：npm install html-webpack-plugin --save-dev，然后引入html-webpack-plugin，在module-exports中配置plugins：

之后運(yùn)行npm run webpack：

可以看到已經(jīng)生成了一個(gè)html文件，并且引用了生成的文件路徑：

也可以對(duì)plugin進(jìn)行配置，參數(shù)為一個(gè)對(duì)象：

filename：生成后的文件名；

template：模板；

Inject：需要將標(biāo)簽放在html哪個(gè)位置，如head、body；

title：html中的title內(nèi)容；

minify：壓縮文件（removeComments刪除注釋，collapseWhitespace刪除空格）；

可以在html中通過ejs模板引擎在htmlWebpackPlugin對(duì)象中獲取config.js中的配置：

Html中：

config.js中：

生成的html文件：

htmlWebpackPlugin有一個(gè)files和一個(gè)options屬性，可以在ejs模板中將其遍歷出來查看所有屬性；

多頁面打包

plugins參數(shù)為一個(gè)數(shù)組，所以可以接收多個(gè)參數(shù)，如果需要生成多個(gè)html，只需要重新調(diào)用new htmlWebpackPlugin()；

新建一個(gè)b.js c.js，在entry中配置如下

在plugins中：

chunks為要引入的打包后的文件路徑，參數(shù)為一個(gè)數(shù)組，excludeChunks參數(shù)接收一個(gè)數(shù)組，意思為排除數(shù)組中的文件之外其他全部引入；然后npm run webpack：

然后可以看到不同的文件通過設(shè)置chunks達(dá)到了引用不同文件的效果；

通過指定chunks的方式引用的文件都是通過src引入，如果希望將一些初始化的腳本通過inline的方式插入到頁面，從而減少http請(qǐng)求數(shù)，可以通過plugin的compilation.assets實(shí)現(xiàn)將script腳本通過inline的方式插入到html：

這樣main.js就插入到了html中，而a、b、c.js分別通過src引用到文件中，這里要注意，將inject參數(shù)改為false，并且main作為通用模板，所有文件中chunks里面都必須包含main，不然會(huì)報(bào)錯(cuò)；

Loader的使用

修改目錄文件：

Src根目錄下有一個(gè)app.js：

src下一個(gè)conponents文件夾，下面一個(gè)layer文件夾，里面一個(gè)layer.html，一個(gè)layer.less，一個(gè)layer.js，配置一次如下：

修改config.js：

Loader的使用有三種方式，第一種是require(‘css-loader!./a.js’)，通過require的方式直接在引入文件時(shí)指定loader，第二種是使用cli，就是在npm中 “style=style-loader!css-loader”，前面也有提到過，現(xiàn)在主要在config.js配置文件中使用loader；

在配置文件的配置中新增一個(gè)module項(xiàng)，此項(xiàng)表示使用’babel’的loader來處理已.js結(jié)尾的文件，babel是將es6語法解析為瀏覽器可以讀取的js語法（如果報(bào)錯(cuò)，請(qǐng)參考后面的配置方式）：

首先要在命令行中安裝babel，npm install babel-loader babel-core babel-preset-env webpack --save-dev，配置：

注釋掉html引用，不然會(huì)報(bào)錯(cuò)，因?yàn)闆]有指定處理html文件的loader：

然后運(yùn)行npm run webpack，就可以看到打包成功了；

注意你的node和npm版本必須要高于某個(gè)版本，具體哪個(gè)版本不知道，安裝最新的就可以了，更新node可以在官網(wǎng)下載最新版本，然后安裝路徑和之前的路徑保持一致就可以了，node中帶有npm，所有安裝最新的node后，npm也會(huì)是最新版本；

可以看到打包成功了，打開頁面也會(huì)有console的layer函數(shù)；

雖然打包的文件很少，但是打包花費(fèi)的時(shí)間還是很長，因?yàn)樗鼤?huì)把node_modules文件一起處理，可以在rules中指定include（包含范圍）和exclude（排除）使打包速度加快，再運(yùn)行一次打包，可以看到時(shí)間從之前的4s多變成了0.6s：

這里exclude要用正則，不然不能正確匹配，include要加上__dirname，這里只處理src下面的文件；

exclude可以的參數(shù)可以是字符串也可以是一個(gè)數(shù)組接收多個(gè)參數(shù)，參數(shù)可以是正則、字符串或者是一個(gè)函數(shù)，這個(gè)路徑必須是絕對(duì)路徑，這個(gè)時(shí)候需要引用node中的path：

可以達(dá)到一樣的效果；

經(jīng)過嘗試，include使用之前的方式會(huì)快很多，所以這里include還是使用之前的方式匹配；

CSS的處理

安裝css-loader和style-loader：npm install css-loader style-loader --save-dev

根目錄下新建一個(gè)css文件夾用于放置css文件，新建一個(gè)common.css文件，用于公共部分css；

在app.js中引用common.css；

配置css-loader：

注意這里要指定2個(gè)loader，一個(gè)style-loader和一個(gè)css-loader，并且style-loader在前，不然會(huì)報(bào)錯(cuò)，無法正常解析；

在一些css屬性需要瀏覽器兼容的時(shí)候，可以借助postcss-loader自動(dòng)為這些需要兼容的屬性加上前綴，比如我們?cè)赾ss文件中加上一個(gè)flex屬性，安裝postcss-loader并配置：

npm install postcss-loader --save-dev

npm install autoprefixer --save-dev(這個(gè)是postcss的插件，用于添加前綴)；

browsers為要兼容的瀏覽器版本，’last 5 versions’為最近的5個(gè)版本；

如果一個(gè)文件是通過@import的方式引入，這種方式就不會(huì)生成前綴，新建一個(gè)flex.css，并設(shè)置一個(gè)flex屬性，然后從common.css 中@import flex.css：

可以看到這是并沒有被正確的添加前綴：

新建一個(gè)postcss.config.js：

webpack.config.js配置如下：

這是通過@import引入的文件也會(huì)被正確的添加上前綴了；

less-loader

首先還是安裝less-loader：npm install less-loader --save-dev

如果沒有安裝less，還要安裝less：npm install less --save-dev

layer.js中引入layer.less，config.js中配置如下：

webpack2和1配置有點(diǎn)不一樣，1.x可以直接使用

{

test:/\.less$/,

loader:’style-loader!css-loader!postcss-loader!less-loader’

}

注意兩種配置的順序都不能變，相當(dāng)于從下往上解析，先處理less，然后postcss添加前綴，然后處理css，最后style標(biāo)簽插入，順序不能變；

在使用@import時(shí)，上面箭頭處可以省略css-loader中的importLoaders屬性，less-loader會(huì)自動(dòng)處理，不需要添加處理css時(shí)的importLoaders屬性；

打包成功后再瀏覽器中可以看到多了一個(gè)style標(biāo)簽，里面就是less文件解析出來的內(nèi)容；

@import less文件時(shí)，不加importLoaders，也會(huì)正確的加上前綴；

sass同理，test屬性值為/\.scss$/，因?yàn)閟ass是scss文件，其他配置和less相同；

處理模板文件

安裝loader：npm install html-loader --save-dev

修改文件：

Index.html中添加一個(gè)div，id為app：

layer.js：

app.js：

layer.html：

config.js：

然后運(yùn)行npm run webpack，頁面可以正常顯示了；

使用模板引擎

ejs為例，修改layer.html為layer.ejs，修改代碼：

安裝ejs-loader：npm install ejs-loader --save-dev

config.js，這里不一定要叫ejs，也可以取見名知意的tpl代表template，因?yàn)榭梢允瞧渌０逡妫?/p>

app.js中：

在tpl中傳入需要的參數(shù)，運(yùn)行打包命令，刷新頁面，可以看到頁面被正確的解析了；

圖片的處理

在src目錄下新建一個(gè)assets文件夾，放入一張圖片，在layer.less中的div下使用相對(duì)路徑設(shè)置背景圖片，安裝file-loader，配置config.js：

運(yùn)行npm run webpack：

可以看到圖片已經(jīng)被打包了；

在index.html中添加一張圖片，打包，可以看到圖片也可以被正確的解析：

然后再.ejs文件中同樣添加一張圖片，打包，刷新頁面；

可以看到圖片沒有被正確的顯示，并且控制臺(tái)報(bào)錯(cuò)沒有找到文件，可以看到css和html中的圖片路徑是經(jīng)過webpack處理替換掉了，但是模板中的圖片路徑?jīng)]有被正確的替換導(dǎo)致找不到文件；

這是可以使用傳參的方式，${}為es6的模板字符串傳參方式，可以在{}中寫簡(jiǎn)單的邏輯運(yùn)算：

重新打包，刷新頁面，可以看到圖片可以正常顯示，并且路徑也被替換；

file-loader中也有一些參數(shù)可以配置，比如：

使用以上配置，圖片會(huì)被保存在dist文件夾下新建的一個(gè)assets文件目錄下，[name]為文件名，[hash:5]表示hash值得前5位，[ext]表示文件的后綴名：

url-loader

url-loader有一個(gè)limit配置項(xiàng)，表示當(dāng)你的文件或圖片大于指定大小的時(shí)候，它會(huì)交給file-loader去處理，如果文件或圖片小于這個(gè)值，它會(huì)將其轉(zhuǎn)換為base64的格式：

npm安裝url-loader，并配置，先將前面的file-loader修改，并配置limit屬性為300k，因?yàn)槲仪懊鎴D片的大小為290k多，打包并運(yùn)行：

前面為之前打包后文件大小，可以看到打包后文件明顯變大了很多，是因?yàn)槲募愋桶l(fā)生了改變，圖片也被打包到了html ejs文件中，頁面上可以看到鼠標(biāo)移入圖片路徑時(shí)會(huì)顯示一段base64編碼，但是頁面效果沒有任何變化；

圖片壓縮

安裝image-webpack-loader，配置：

運(yùn)行打包：

可以看到文件明顯變小了，我們換回file-loader：

可以看到圖片從之前的296k被壓縮到只有103k；

image-webpack-loader對(duì)每一種圖片格式都有具體的參數(shù)進(jìn)行優(yōu)化，具體可以參考官網(wǎng)。

最后附一張package.json和config.js圖：