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

準備工做

• 安裝 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

<div id="app">
    <h4>hello webpack!</h4>
    <p>hello loader!</p>
</div>
<script src="./main.js"></script>

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