原來webpack的loader如此簡單，輕鬆寫一個本身loader

時間 2020-04-26

標籤原來 webpack loader 如此簡單輕鬆一個本身简体版

原文原文鏈接

本篇文章爲webpack系列文章的第二篇，若是你對webpack一點都不瞭解，但願你在看本篇文章以前先看一下往期文章。
如何使用webpack實現模塊化打包【1】javascript

webpack的思想就是萬物皆模塊，這裏的模塊不只僅只是JavaScript文件，它還能夠是一個文件、一張圖片、一個css樣式表等資源。若是咱們把這些內容所有在index.html中引入，那整個項目的代碼看起來滿篇都是引入的外部資源，本身都沒法區分。模塊化的思想能夠是把某個功能設計爲一個模塊，咱們能夠把與這個模塊相關的其餘資源，只在這個模塊中引入，這樣作能夠大大的提升後期的可維護性。
可是webpack沒法直接識別非JavaScript腳本文件。不過webpack提供了另一個強大之處，使其能夠打包任何類型的資源文件，這就是webpack的loader機制。
css

loader 用於對模塊的源代碼進行轉換。loader 可使你在 import 或"加載"模塊時預處理文件。所以，loader 相似於其餘構建工具中「任務(task)」，並提供了處理前端構建步驟的強大方法。loader 能夠將文件從不一樣的語言（如 TypeScript）轉換爲 JavaScript，或將內聯圖像轉換爲 data URL。loader 甚至容許你直接在 JavaScript 模塊中 import CSS文件！
老規矩，直接接個例子來說解html

新建index.js和base.css文件，在base.css中寫一些基本樣式
div {    background: pink;    text-align: center;    border-radius: 10px;}
在index.js中引入base.css
import base.css
console.log('Hello webpack loader')
在webpack.config.js中進行基本的打包配置
module.exports = {
    mode: 'none',
    entry: './src/index.js',
    output: {
        filename: 'index.js',
    },
 }

開始打包npx webpack

在控制檯能夠看到報錯了，大概的意思是說你須要一個適當的加載器來處理這個類型的文件，目前沒有配置加載器來處理此文件。這裏的加載器就是咱們所須要的loader，如今咱們在JS中引入了一個CSS文件，上面已經提到過，webpack只能識別JavaScript語言，所以這裏咱們須要對CSS進行轉換爲JavaScript，這個轉換的過程固然不須要們本身起手動的編寫，目前已經不少現成的加載器，咱們只須要使用npm安裝便可使用。
對CSS進行處理所須要用到的是css-loader，那咱們就先來安裝前端

npm install css-loader --save

安裝後咱們須要告訴webpack，遇到CSS樣式文件時就須要使用css-loader進行轉換，這就須要在webpack.config.js中配置，在module屬性中的rules中進行配置，rules是一個數組，由於咱們可能會遇到各類類型的文件，對用不一樣類型的文件就要使用不一樣的loader進行轉換。每一項都包含test和use屬性。
test指的是匹配什麼文件，是一個正則表達式
use表示使用什麼加載器來轉換java

module.exports = {
    mode: 'none',
    entry: './src/index.js',
    output: {
        filename: 'index.js',
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use: 'css-loader'
            }
        ]
    }
}

熟練的再次打包

nice，so easy
興奮的新建一個html引入打包後的index.js測試node

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack-loader</title>
</head>
<body>
    <div>
        <h2>webpack-loader</h2>
    </div>
    <script src="./dist/index.js"></script>
</body>
</html>

用個人Chrome瀏覽器打開看看效果

並無任何樣式效果，這是因爲css-loader只是把CSS模塊加載到JavaScript中，可是並無使用這個模塊。那如何讓它被使用呢，只須要在css-loader的基礎上再使用style-loader便可，style-loader能夠將轉換後的結果經過style標籤追加到頁面中。
npm install style-loader --save
這一步是在css-loader轉換後進行，正確的配置方法以下webpack

{
    test: /\.css$/,
    use: [
        'style-loader',
        'css-loader'
    ]
}

use能夠接受一個數組，對匹配的文件會通過數組中的每個loader進行轉換，這裏要注意一點，轉換是有順序的，從數組的最後往前進行，所以這裏的style-loader應該在css-loader的前面。
從新打包，就能夠看到咱們想要的效果啦
web

咱們也能夠來編寫本身loader，其實loader的本質就是將接收的內容轉換爲另外一種內容的過程，簡單的說就是接收一個值，我處理後再返回給你。正則表達式

咱們知道了它的原理後，再來實現思路就很清晰了。咱們常常會遇到md文件，md文件中採用的markdown語法，如今我寫博客也開始使用markdown來寫。若是直接將md文件引入頁面中，必然是沒法顯示的，咱們須要將它轉化爲html文本才行。
新建一個blog.md文件npm

## 這是我本身寫的一個loader
**你能看到我，全靠loader的公功勞。**

歡迎訪問[個人網站](www.dengzhanyong.com)
` ` `
console.log('hello webpack')
` ` `

而後在index.js中引入，並插入到body中顯示

import blog from  './blog.md'
var node = document.createElement('div')
node.innerHTML = blog
document.body.append(node)

使用webpack進行打包

控制檯報錯，這是咱們意料之中的，由於webpack沒法識別md文件。
新建一個md-loader.js文件，這就是咱們本身的loader。

const marked = require('marked')
module.exports = source =>{
    var html = marked(source)
    return html
}

它接收一個source，這就是接收的文件內容，這裏咱們須要用到一個第三方的包marked，他能夠將md文本轉爲html文本，最後返回處理後的結果。
在webpack.config.js中進行配置，這裏有兩點須要注意
use可使用本地的loader
轉換後的html文本須要通過html-loader再次處理
html-loader應放在./md-loader的前面，也就是後執行

{
    test: /\.md$/,
    use: [
        'html-loader',
        './md-loader',
    ]
}

如今就能夠在頁面中看到md文件編譯後的內容了。

上面只是對loader的簡單應用，它還具備如下特性：

loader 支持鏈式傳遞。可以對資源使用流水線(pipeline)。一組鏈式的 loader 將按照相反的順序執行。
loader 鏈中的第一個 loader 返回值給下一個 loader。在最後一個 loader，返回 webpack 所預期的 JavaScript。
loader 能夠是同步的，也能夠是異步的。
loader 運行在 Node.js 中，而且可以執行任何可能的操做。
loader 接收查詢參數。用於對 loader 傳遞配置。
loader 也可以使用 options 對象進行配置。
除了使用 package.json 常見的 main 屬性，還能夠將普通的 npm 模塊導出爲 loader，作法是在 package.json 裏定義一個 loader 字段。

插件(plugin)能夠爲 loader 帶來更多特性。