資訊專欄INFORMATION COLUMN
摘要：從打包后的文件中提取出特定的內(nèi)容到一個(gè)新的文件中，需要配合使用，由指定提取文件的路徑提取文件，使其變成代碼。在打包過程中會(huì)將代碼中資源的原始路徑替換成資源的新路徑在打包文件夾下資源的路徑。
less-loader
處理代碼中引入的less文件，通過對(duì)應(yīng)的less模塊，將less轉(zhuǎn)變?yōu)閏ss
css-loader通過css-loader，使得在css中能夠使用@import和url(...)的方式實(shí)現(xiàn)require()的功能
style-loaderstyle-loader將所有計(jì)算后的樣式加入頁面中(將樣式表嵌入webpack打包后的JS文件中即css和js會(huì)被打包到同一個(gè)文件中)
babel-loader處理jsx文件，結(jié)合babel對(duì)jsx中的es6語法、jsx語法進(jìn)行處理轉(zhuǎn)換
file-loader{
test: /.(eot|svg|ttf|woff2?)$/,
use: ["file-loader?name=assets.fonts/[name].[ext"]
}
在查詢字符串參數(shù)中指定的路徑下生成對(duì)應(yīng)的文件(拷貝過去)
url-loader對(duì)于比較小(url-loader的查詢參數(shù)進(jìn)行了限制)的圖片，可以將其轉(zhuǎn)換為base64形式，如果圖片大小超過限制，那么webpack就會(huì)使用file-loader去處理文件，并且所有的查詢參數(shù)都會(huì)傳遞給file-loader，file-loader會(huì)在查詢字符串參數(shù)中指定的路徑生成對(duì)應(yīng)的文件。
extract-loaderExtract text from bundle into a file.從打包后的js文件中提取出特定的內(nèi)容到一個(gè)新的文件中，需要配合file-loader使用，由file-loader指定提取文件的路徑
html-loader提取html文件，使其變成js代碼。這個(gè)loader需要結(jié)合extract-loader和file-loader一起使用
{
test: /.html$/,
use: [
"file-loader?name=[name].html",
"extract-loader",
"html-loader"
]
}
上面的代碼是webpack的一段配置代碼，具體的作用是：首先經(jīng)過html-loader：提取html代碼，生成對(duì)應(yīng)的js代碼;然后經(jīng)過extract-loader：抽取出這部分html代碼；最后經(jīng)過file-loader，在file-loader的查詢字符串參數(shù)指定的位置生成新的html文件。
為什么一個(gè)html文件要經(jīng)過上述loader的處理？
在開發(fā)過程中，我們將所有的代碼、資源放在一個(gè)路徑下，當(dāng)打包后，會(huì)生成一個(gè)打包文件夾，其中包含了打包后的代碼以及所有資源文件(image、fonts)。webpack在打包過程中會(huì)將代碼中資源的原始路徑替換成資源的新路徑(在打包文件夾下資源的路徑)。html中如果存在元素，并且使用的本地圖片，在打包后我們希望
元素的路徑同樣替換成對(duì)應(yīng)資源的新路徑，因此，需要經(jīng)過上述loader的處理，當(dāng)然在webpack.config.js文件的entry和output部分，同樣得指定對(duì)應(yīng)的html文件，如下所示
entry: {
vendor: "./src/vendor/index.js",
// 將index.jsx和index.html文件打包到一起，在打包過程中webpack會(huì)將index.html依次經(jīng)過html-loader、extract-loader、file-loader的處理
xx: ["./src/xx/index.jsx", "./src/xx/index.html"]
},
output: {
path: path.resolve(__dirname, "public"),
publicPath: "/"
filename: "assets/js/[name].js",
chunkFilename: "assets/js/chunk.[id].js",
}
..... 省略
{
test: /.html$/,
use: [
"file-loader?name=[name].html",
"extract-loader",
"html-loader"
]
}
個(gè)人理解
webpack在打包項(xiàng)目的過程中，會(huì)將一些代碼、資源(css、image、fonts)通過extract-loader、file-loader、ExtractTextPlugin等一些loader和插件打包/復(fù)制到新的路徑中去，webpack會(huì)將代碼中的舊路徑替換成新路徑。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/83597.html
摘要：該插件的作用是為組件分配，通過這個(gè)插件會(huì)分析使用頻率最多的模塊，并未他們分配最小的，越小表示模塊被找到的速度會(huì)更快使用方法用于抽取公共的模塊 extract-text-webpack-plugin extract-text-webpack-plugin主要是為了抽離css樣式,并將樣式打包成css文件 const ExtractTextPlugin = require(extract-...
webpack的loaders是一大特色，也是很重要的一部分。這遍博客我將分類講解一些常用的laodershowImg(https://segmentfault.com/img/remote/1460000005742040); 一、loaders之 預(yù)處理 css-loader 處理css中路徑引用等問題 style-loader 動(dòng)態(tài)把樣式寫入css sass-loader scss編譯器 ...
摘要：基本環(huán)境搭建就不展開講了一插件篇自動(dòng)補(bǔ)全前綴官方是這樣說的，也就是說它是一個(gè)自動(dòng)檢測(cè)兼容性給各個(gè)瀏覽器加個(gè)內(nèi)核前綴的插件。 上一篇博客講解了webpack環(huán)境的基本，這一篇講解一些更深入的內(nèi)容和開發(fā)技巧?；经h(huán)境搭建就不展開講了showImg(http://static.xiaomo.info/images/webpack.png); 一、插件篇 1. 自動(dòng)補(bǔ)全css3前綴 autop...
摘要：面試你一般問你的原理，的原理，你有用那些優(yōu)化措施前端開發(fā)已經(jīng)模塊化，它改進(jìn)了代碼庫的封裝和結(jié)構(gòu)。這么說負(fù)責(zé)的是處理源文件的如，一次處理一個(gè)文件。小心的運(yùn)用他們。因?yàn)殡S著項(xiàng)目的增長，它們會(huì)變得很難馴服。 還是以前一樣，有些概念面試可能會(huì)考，我都用*標(biāo)記了出來，兩句話就總結(jié)清楚其余的地方如果你想了解webpack，就仔細(xì)看看，雖然本教程不能讓你webpack玩的很6，但是懂操作流程夠了。面...
閱讀 1584·2021-11-02 14:42
閱讀 2323·2021-10-11 10:58
閱讀 671·2021-09-26 09:46
閱讀 2922·2021-09-08 09:35
閱讀 1418·2021-08-24 10:01
閱讀 1243·2019-08-30 15:54
閱讀 3615·2019-08-30 15:44
閱讀 1805·2019-08-30 10:49
