亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Webpack Loader簡(jiǎn)析（一）：基本概念

sherlock221 / 1574人閱讀

摘要：需要得到最后一個(gè)產(chǎn)生的處理結(jié)果。這個(gè)處理結(jié)果應(yīng)該是或者被轉(zhuǎn)換為一個(gè)，代表了模塊的源碼。另外還可以傳遞一個(gè)可選的結(jié)果格式為對(duì)象。在異步模式中，必須調(diào)用，來(lái)指示等待異步結(jié)果，它會(huì)返回回調(diào)函數(shù)，隨后必須返回并且調(diào)用該回調(diào)函數(shù)。

準(zhǔn)備工作

安裝 Node.js, 建議安裝LTS長(zhǎng)期支持版本

mkdir webpack and cd webpack and npm init -y

npm i webpack webpack-cli --save-dev

loader是什么 
所謂 loader 只是一個(gè)導(dǎo)出為函數(shù)的 JavaScript 模塊。loader runner 會(huì)調(diào)用這個(gè)函數(shù)，然后把上一個(gè) loader 產(chǎn)生的結(jié)果或者資源文件(resource file)傳入進(jìn)去。函數(shù)的 this 上下文將由 webpack 填充，并且 loader runner 具有一些有用方法，可以使 loader 改變?yōu)楫惒秸{(diào)用方式，或者獲取 query 參數(shù)。
第一個(gè) loader 的傳入?yún)?shù)只有一個(gè)：資源文件(resource file)的內(nèi)容。compiler 需要得到最后一個(gè) loader 產(chǎn)生的處理結(jié)果。這個(gè)處理結(jié)果應(yīng)該是 String 或者 Buffer（被轉(zhuǎn)換為一個(gè) string），代表了模塊的 JavaScript 源碼。另外還可以傳遞一個(gè)可選的 SourceMap 結(jié)果（格式為 JSON 對(duì)象）。
如果是單個(gè)處理結(jié)果，可以在同步模式中直接返回。如果有多個(gè)處理結(jié)果，則必須調(diào)用 this.callback()。在異步模式中，必須調(diào)用 this.async()，來(lái)指示 loader runner 等待異步結(jié)果，它會(huì)返回 this.callback() 回調(diào)函數(shù)，隨后 loader 必須返回 undefined 并且調(diào)用該回調(diào)函數(shù)。
loader干了些什么

webpack loader對(duì)js代碼、樣式、圖片等資源重新編譯返回一個(gè)理想的結(jié)果，本質(zhì)上說(shuō)，loader是一些特殊的webpack插件，當(dāng)然webpack本身有plugin的概念。默認(rèn)情況下，資源文件會(huì)被轉(zhuǎn)化為 UTF-8 字符串，然后傳給 loader。通過(guò)設(shè)置 raw，loader 可以接收原始的 Buffer。每一個(gè) loader 都可以用 String 或者 Buffer 的形式傳遞它的處理結(jié)果。Complier 將會(huì)把它們?cè)?loader 之間相互轉(zhuǎn)換。loader 總是從右到左地被調(diào)用。

接下來(lái)我們以css-loader為例看看它的輸出
創(chuàng)建文件如下：

-- a.css
-- index.html
-- index.js
-- webpack.config.js
a.css
#app {
  background-color: #f5f5f5;
  color: blue;
}
#app p {
  color: gray;
}
index.html

    
hello webpack!

    
hello loader!




index.js
const a = require("./a.css");
console.log(a);
webpack.config.js
module.exports = {
    entry: {
        main: "./index.js"
    },
    output: {
        filename: "[name].js",
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: "css-loader"
            }
        ]
    }
}

上面的代碼很常見(jiàn)，webpack幫助我們加載.css文件。當(dāng)weback在構(gòu)建的過(guò)程中會(huì)根據(jù)已有配置首先將a.css作為參數(shù)交給css-loader, css-loader將會(huì)進(jìn)行一系列處理輸出特定的數(shù)據(jù)。實(shí)際上a.css會(huì)作為raw resource string類型的參數(shù)，有一些loader只能接受raw作為參數(shù)，例如css-loader、handlebars-loader...
執(zhí)行npx webpack

可以看到，css-loader將樣式代碼處理成了js數(shù)組，并且我們的樣式代碼被處理成了字符串
修改webpack.config.js

...
module: {
    rules: [
        {
            test: /.css$/,
            use: [ "style-loader", "css-loader" ]
        }
    ]
}
...

加上style-loader，再看看輸出的啥：


如你所見(jiàn)，style-loader將css-loader返回的樣式數(shù)組一頓操作插入到html head中去了，然后他自己返回了一個(gè)空對(duì)象

loader特性之一就是：利用參數(shù)完成某個(gè)任務(wù)，不是一定有所輸出，就像一個(gè)返回值為空的函數(shù)。

顯然style-loader就是符合這種特性的loader之一，它與css-loader搭配起來(lái)實(shí)現(xiàn)了我們需要的功能。并且他們各自獨(dú)立，保持小而精的運(yùn)行，方便與其他loader搭配合作，比如當(dāng)我想把樣式代碼輸出為js字符串時(shí)我就會(huì)選擇to-string-loader，首先安裝這個(gè)新的partner，npm i to-string-loader，然后按照順序引用它，切記順序很重要，

...
module: {
    rules: [
        {
            test: /.css$/,
            use: [ "to-string-loader", "css-loader" ]
        }
    ]
}
...

重新構(gòu)建后結(jié)果如下：

關(guān)于css-loader

css-loader使用頻率比較高，它有一些配置可以幫助我們實(shí)現(xiàn)特定需求。

...
module: {
    rules: [
        {
            test: /.css$/,
            use: [
                "to-string-loader",
                {
                   loader: "css-loader",
                   options: {
                       url: true,        // 是否啟用url(), 類似于 url(image.png)` => `require("./image.png")
                       import: true,     // 是否啟用@import()加載樣式
                       modules: false,   // 是否啟用CSS Modules
                       localIdentName: [hash:base64],    // Configure the generated ident
                       sourceMap: false,    // Enable/Disable Sourcemaps
                       camelCase: false,    // Export Classnames in CamelCase
                       importLoaders: 0    // Number of loaders applied before CSS loader
                   } 
                }
            ]
        }
    ]
}
...
參考鏈接

Webpack文檔 - 加載器Loaders

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/96897.html

相關(guān)文章

  • Loader學(xué)習(xí)，簡(jiǎn)析babel-loader

    摘要：用來(lái)轉(zhuǎn)換內(nèi)容，內(nèi)部調(diào)用了方法進(jìn)行轉(zhuǎn)換，這里簡(jiǎn)單介紹一下的原理將代碼解析成，對(duì)進(jìn)行轉(zhuǎn)譯，得到新的，新的通過(guò)轉(zhuǎn)換成，核心方法在中的方法，有興趣可以去了解一下。將函數(shù)傳入?yún)?shù)和歸并，得到。通常我們是用不上的，估計(jì)在某些中可能會(huì)使用到。 什么是Loader? 繼上兩篇文章webpack工作原理介紹（上篇、下篇）,我們了解到Loader：模塊轉(zhuǎn)換器，也就是將模塊的內(nèi)容按照需求裝換成新內(nèi)容，而且每...

    wpw 評(píng)論0 收藏0

  • Webpack模塊化原理簡(jiǎn)析

    摘要：模塊化原理簡(jiǎn)析的核心原理一切皆模塊在中，，靜態(tài)資源文件等都可以視作模塊便于管理，利于重復(fù)利用按需加載進(jìn)行代碼分割，實(shí)現(xiàn)按需加載。模塊化原理以為例，分析構(gòu)建的模塊化方式。 webpack模塊化原理簡(jiǎn)析 1.webpack的核心原理 一切皆模塊：在webpack中，css,html.js，靜態(tài)資源文件等都可以視作模塊；便于管理，利于重復(fù)利用； 按需加載：進(jìn)行代碼分割，實(shí)現(xiàn)按需加載。 2...

    tracy 評(píng)論0 收藏0

  • Webpack的坑位整理

    摘要：在尋找相對(duì)路徑的文件時(shí)會(huì)以為根目錄，默認(rèn)為執(zhí)行啟動(dòng)時(shí)所在的當(dāng)前目錄。在文件被添加到依賴圖中時(shí)，將其轉(zhuǎn)換稱為了模塊。配置中的兩個(gè)目標(biāo)。僅限高級(jí)用途，默認(rèn)情況下自動(dòng)生成生成文件的文件名。webpack webpack現(xiàn)在是主要的打包工具了，現(xiàn)在網(wǎng)絡(luò)上也有很多資料可以學(xué)習(xí)了。這里主要整理了一些基礎(chǔ)概念，但沒(méi)有所有的寫，只是把之前遇到的問(wèn)題記錄了一下。 本文的原文在我的博客中：github.com...

    lidashuang 評(píng)論0 收藏0

  • Webpack基本功能理解以及使用

    摘要：在這個(gè)過(guò)程中，會(huì)用到一些解析工具用來(lái)預(yù)處理一些模塊以及拓展語(yǔ)言例如這些工具的配置使用都是在中完成的。屬性，表示進(jìn)行轉(zhuǎn)換時(shí)，應(yīng)該使用哪個(gè)。插件接口功能極其強(qiáng)大，可以用來(lái)處理各種各樣的任務(wù)。 對(duì)于前端工程化，webpack一個(gè)神奇的工具，既然是個(gè)神奇的工具。那我們保留我們的好奇心，來(lái)聊一聊它，首先我們要搞清楚webpack到底是用來(lái)解決什么問(wèn)題的，然后我們來(lái)看看它到底是怎么做的，最后來(lái)看看...

    KnewOne 評(píng)論0 收藏0

  • webpack 大法好 ---- 基礎(chǔ)概念與配置（1）

    摘要：不信你命令行里敲個(gè)試試敲敲敲當(dāng)然了想直接運(yùn)行命令，你需要將添加到系統(tǒng)變量啊。全局安裝相同的，運(yùn)行命令耐心等待安裝完成后，你的系統(tǒng)變量里就存在命令了，你可以運(yùn)行下試試。上訴如果有不懂的，歡迎留言。 再一次見(jiàn)面！ Light 還是太太太懶了，距離上一篇沒(méi)啥營(yíng)養(yǎng)的文章已經(jīng)過(guò)去好多天。今天為大家介紹介紹 webpack 最基本的概念，以及簡(jiǎn)單的配置，讓你能快速得搭建一個(gè)可用的 webpack ...

    QLQ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<