Webpack Loader簡析（一）：基本概念

sherlock221 發布于2019-08-23 11:00 / 1517人閱讀

摘要：需要得到最后一個產生的處理結果。這個處理結果應該是或者被轉換為一個，代表了模塊的源碼。另外還可以傳遞一個可選的結果格式為對象。在異步模式中，必須調用，來指示等待異步結果，它會返回回調函數，隨后必須返回并且調用該回調函數。

準備工作

安裝 Node.js, 建議安裝LTS長期支持版本

mkdir webpack and cd webpack and npm init -y

npm i webpack webpack-cli --save-dev

loader是什么

所謂 loader 只是一個導出為函數的 JavaScript 模塊。loader runner 會調用這個函數，然后把上一個 loader 產生的結果或者資源文件(resource file)傳入進去。函數的 this 上下文將由 webpack 填充，并且 loader runner 具有一些有用方法，可以使 loader 改變為異步調用方式，或者獲取 query 參數。
第一個 loader 的傳入參數只有一個：資源文件(resource file)的內容。compiler 需要得到最后一個 loader 產生的處理結果。這個處理結果應該是 String 或者 Buffer（被轉換為一個 string），代表了模塊的 JavaScript 源碼。另外還可以傳遞一個可選的 SourceMap 結果（格式為 JSON 對象）。
如果是單個處理結果，可以在同步模式中直接返回。如果有多個處理結果，則必須調用 this.callback()。在異步模式中，必須調用 this.async()，來指示 loader runner 等待異步結果，它會返回 this.callback() 回調函數，隨后 loader 必須返回 undefined 并且調用該回調函數。

loader干了些什么

webpack loader對js代碼、樣式、圖片等資源重新編譯返回一個理想的結果，本質上說，loader是一些特殊的webpack插件，當然webpack本身有plugin的概念。默認情況下，資源文件會被轉化為 UTF-8 字符串，然后傳給 loader。通過設置 raw，loader 可以接收原始的 Buffer。每一個 loader 都可以用 String 或者 Buffer 的形式傳遞它的處理結果。Complier 將會把它們在 loader 之間相互轉換。loader 總是從右到左地被調用。

接下來我們以css-loader為例看看它的輸出
創建文件如下：

-- 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"
            }
        ]
    }
}

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

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

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

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

如你所見，style-loader將css-loader返回的樣式數組一頓操作插入到html head中去了，然后他自己返回了一個空對象

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

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

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

重新構建后結果如下：

關于css-loader

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

...
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

云服務器 GPU云服務器基本概念短信產品基本概念機器學習基本概念超融合架構基本概念

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96897.html

Loader學習，簡析babel-loader

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

wpw 2019-08-26 13:35 評論0 收藏0
Webpack模塊化原理簡析

摘要：模塊化原理簡析的核心原理一切皆模塊在中，，靜態資源文件等都可以視作模塊便于管理，利于重復利用按需加載進行代碼分割，實現按需加載。模塊化原理以為例，分析構建的模塊化方式。 webpack模塊化原理簡析 1.webpack的核心原理一切皆模塊：在webpack中，css,html.js，靜態資源文件等都可以視作模塊；便于管理，利于重復利用；按需加載：進行代碼分割，實現按需加載。 2...

tracy 2019-08-20 18:24 評論0 收藏0
Webpack的坑位整理

摘要：在尋找相對路徑的文件時會以為根目錄，默認為執行啟動時所在的當前目錄。在文件被添加到依賴圖中時，將其轉換稱為了模塊。配置中的兩個目標。僅限高級用途，默認情況下自動生成生成文件的文件名。webpack webpack現在是主要的打包工具了，現在網絡上也有很多資料可以學習了。這里主要整理了一些基礎概念，但沒有所有的寫，只是把之前遇到的問題記錄了一下。本文的原文在我的博客中：github.com...

lidashuang 2019-05-23 17:34 評論0 收藏0
Webpack基本功能理解以及使用

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

KnewOne 2019-08-26 10:09 評論0 收藏0
webpack 大法好 ---- 基礎概念與配置（1）

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

QLQ 2019-08-20 14:41 評論0 收藏0