摘要:官方的文檔模塊受到影響的選項(xiàng)。官方文檔通過注入標(biāo)簽將添加到。官方文檔這兩者一般都是配合在一起用的。代表圖片打包限制,這個(gè)限制并不是說超過了就不能打包,而是指當(dāng)圖片大小小于限制時(shí)會(huì)自動(dòng)轉(zhuǎn)成碼引用。不過它的放后面。
module (官方的文檔)第一篇講了Webpack的安裝,以及配置文件的 entry,devtool,output,resolve。這篇接著說配置文件的 module。
想看看第一篇的朋友可以點(diǎn) 這里。
module: { rules: [ { test: /.js$/, loader: "babel-loader" }, { test: /.(png|jpg|gif|svg)$/, loader: "file-loader", options: { name: "[name].[ext]?[hash]"} } ] }
module:模塊受到影響的選項(xiàng)。我個(gè)人理解就是要打包的模塊會(huì)受到它配置的影響而發(fā)生一些可控的變化。常見的就是里面的rules,主要說也是這一部分。
rules:顧名思義,定規(guī)則的,怎么定呢?看有 test,正則表達(dá)式,那么要打包的模塊是要進(jìn)行匹配啊,匹配做啥?匹配的模塊就要按照Loader的規(guī)則進(jìn)行變化了。
loader:通過使用不同的 loader,webpack 有能力調(diào)用外部的腳本或工具,實(shí)現(xiàn)對(duì)不同格式的文件的處理,比如說分析轉(zhuǎn)換 scss 為 css,或者把下一代的JS文件(ES6,ES7)轉(zhuǎn)換為現(xiàn)代瀏覽器兼容的JS文件。
babel-loader (官網(wǎng)地址)一個(gè)js的編譯器,可將 es6+ 轉(zhuǎn)為es5 ,從而在現(xiàn)有的瀏覽器運(yùn)行。
它十分強(qiáng)大,可看 阮一峰老師的babel教學(xué),到時(shí)我也會(huì)寫一遍詳細(xì)的 babel 使用文章。
{ test: /.js$/, loader: "babel-loader", exclude: /node_modules/ }
每一個(gè)規(guī)則都有 test:正則表達(dá)式,上圖是匹配 .js 。
exclude:這規(guī)則不包含哪個(gè)模塊的意思,值可以是 正則,也可以是 包含路徑的字符串?dāng)?shù)組。有不包含當(dāng)然也有include(包含)。
babel 有自己的配置文件 .babelrc,test 匹配了,就執(zhí)行配置文件(.babelrc)里的規(guī)則。
// .babelrc 的內(nèi)容。 { "presets": [ // 設(shè)定轉(zhuǎn)碼規(guī)則 "env", "stage-2" "stage-3" ], "plugins": ["transform-runtime"] }
preset 只是編譯了語法,那新的API就可能沒辦法編譯了,這時(shí)候需要 plugins 了。
env: 包含 es2015,es2016,es2017 的轉(zhuǎn)碼規(guī)則 npm install babel-preset-env --save-dev
stage-2: es7 第二版本的轉(zhuǎn)碼規(guī)則 npm install babel-preset-stage-2 --save-dev
stage-3: es7 第三版本的轉(zhuǎn)碼規(guī)則 npm install babel-preset-stage-2 --save-dev
babel-polyfill 雖然支持編譯某些新的API,但還有不支持的API,那 plugins 提供了輔助的作用,transform-runtime 就是其中一個(gè)。
css-loader 和 style-loadercss-loader: 很多時(shí)候會(huì)用到 require,import,@import 導(dǎo)入 css ,那么就要用到 css-loader 進(jìn)行轉(zhuǎn)換。(官方文檔)
style-loader: 通過注入 標(biāo)簽將 CSS 添加到 DOM。(官方文檔)
這兩者一般都是配合在一起用的。
{ test: /.css$/, use: [ "style-loader", "css-loader" ] // 也可以寫成 loader: "style!css" 或 loader: [ "style-loader", "css-loader" ] }url-loader (官方文檔)
它的作用就類似 file-loader(下面會(huì)說),但是在文件大小低于指定的限制時(shí)(單位 bytes)可以返回一個(gè)以 base64 的方式引用。
{ test: /.(png|jpg|gif)$/, use: [ { loader: "url-loader", options: { limit: 8192, name: "images/[hash:8].[name].[ext]" } } ] }
use 里包含 loader 這種寫法也可以,這樣寫是為了給每個(gè) loader 都可以添加自身的 options。
options 是 url-loader 的自身配置,就像 babel 也有自己的配置一樣。
limit:代表圖片打包限制,這個(gè)限制并不是說超過了就不能打包,而是指當(dāng)圖片大小小于限制時(shí)會(huì)自動(dòng)轉(zhuǎn)成 base64 碼引用。上例中大于 8192 字節(jié)的圖片正常打包,小于8192 字節(jié)的圖片以 base64 的方式引用。
name: 打包到指定目錄下會(huì)生成 images 的文件夾,且原圖的 name(名字)前帶有 8 位 hash 值。 最后的 .[ext] 意思是原來什么擴(kuò)展名就是什么擴(kuò)展名。
如果文件大小大于限制,將轉(zhuǎn)為使用 file-loader,所有的查詢參數(shù)也會(huì)透?jìng)鬟^去。如果沒有 file-loader 就肯定不會(huì)傳過去咯。
file-loader (官方文檔)默認(rèn)情況下,生成的文件的文件名是文件內(nèi)容的 MD5 散列,具有所需資源的原始擴(kuò)展名。
{ test: /.(png|jpg|gif|svg)$/, loader: "file-loader", options: { name: "[name].[ext]?[hash]" } }
name: 這里的 name 跟上面一樣的意思。不過它的 hash 放后面。
例如:file.png => file.png?e43b20c069c4a01867c31e98cbce33c9。
[hash]: 這里的是內(nèi)容的哈希值,默認(rèn)為十六進(jìn)制編碼的 md5。
最后說下loader 當(dāng)然不止這些,我只是列舉了一些常見的。例如 vue 和 react 的 loader 等等。
每個(gè) loader 都有他們自身的 options ,我也是列舉一些常見的。
同樣 module 除了 rules 也有其他的屬性。
上面都是常見,不常見的呢。作為程序猿,要去讀文檔,要去讀文檔,要去讀文檔?。?! 這是基本技能咧,哈哈,每個(gè)官網(wǎng)我都有貼的。
使用教程(三)--- plugins文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/90304.html
摘要:這是局部安裝局部安裝的使用要帶路徑哇,要寫路徑,好麻煩哦,沒事,那就全局安裝吧。如果該值是一個(gè)相對(duì)路徑,它將相對(duì)于包含的文件。就相當(dāng)于就相當(dāng)于就相當(dāng)于后面帶有意味著要完全匹配如果,因?yàn)闆]完全匹配,那么加載的是下文件夾里的使用教程二 Webpack是什么,我就不過多介紹了,大家都有耳聞,不過還是配張圖讓大家體會(huì)下。showImg(https://segmentfault.com/img/...
摘要:剛寫的時(shí)候,心里有很多小聲音寫不好的萬一寫錯(cuò),誤導(dǎo)別人怎么辦等等。最重要還是感謝你的支持。接下來還會(huì)寫些有趣的東西帶給大家。 這個(gè)教程就此完結(jié)咯,兩周前的一個(gè)念頭也實(shí)現(xiàn)了。剛寫的時(shí)候,心里有很多小聲音: 寫不好的 , 萬一寫錯(cuò),誤導(dǎo)別人怎么辦 等等。萬事開頭難,寫著寫著就發(fā)現(xiàn)和之前看到的一句話很貼切,輸入一些東西很簡單的,但你要輸出確實(shí)比較難 。 使用教程(一)--- entry,...
摘要:使用教程一,,,使用教程二使用教程三我的版本是官方的文檔在開發(fā)模式下,提供虛擬服務(wù)器,讓我們進(jìn)行開發(fā)和調(diào)試。文檔如果為,開啟虛擬服務(wù)器時(shí),為你的代碼進(jìn)行壓縮。的警告和錯(cuò)誤是不輸出到終端的。而則作用于請(qǐng)求路徑上的。不想啟用也可以填。 使用教程(一)--- entry,devtool,output,resolve使用教程(二)--- module.loaders使用教程(三)--- pl...
摘要:更多相關(guān)介紹請(qǐng)看這特點(diǎn)僅僅只是虛擬最大限度減少與的交互類似于使用操作單向數(shù)據(jù)流很大程度減少了重復(fù)代碼的使用組件化可組合一個(gè)組件易于和其它組件一起使用,或者嵌套在另一個(gè)組件內(nèi)部。在使用后,就變得很容易維護(hù),而且數(shù)據(jù)流非常清晰,容易解決遇到的。 歡迎移步我的博客閱讀:《React 入門實(shí)踐》 在寫這篇文章之前,我已經(jīng)接觸 React 有大半年了。在初步學(xué)習(xí) React 之后就正式應(yīng)用到項(xiàng)...
摘要:年前摸索著寫了一個(gè)使用進(jìn)行開發(fā),今天再摸索著學(xué)習(xí)一下吧。。一些題外話使用的初衷其實(shí)是想用。這里使用了一個(gè)叫的加載器,在使用進(jìn)行開發(fā)里面有介紹過,我們都是使用對(duì)風(fēng)格的代碼進(jìn)行轉(zhuǎn)換,所以在里面同樣使用了轉(zhuǎn)碼規(guī)則。 年前摸索著寫了一個(gè) 使用gulp 進(jìn)行ES6開發(fā) ,今天再摸索著學(xué)習(xí)一下webpack吧。。 一些題外話 使用 webpack 的初衷其實(shí)是想用 React。學(xué)習(xí) React 的...
閱讀 1905·2021-11-23 09:51
閱讀 1549·2021-11-19 09:40
閱讀 3221·2021-11-11 11:01
閱讀 1120·2021-09-27 13:34
閱讀 1852·2021-09-22 15:56
閱讀 2136·2019-08-30 15:52
閱讀 1071·2019-08-30 14:13
閱讀 3487·2019-08-30 14:10