一張圖帶你瞭解webpack的require.context

不少人應該像我同樣，對於webpack的require.context都是隻知其一;不知其二吧。網上不少關於require.context的使用案例，可是我沒找到能夠幫助我理解這個知識點的，因而也決定本身來探索一下，下面以網上流行的svg圖標方案爲例說明。對了，本文的重點是require.context，並不會去解釋svg symbol方案svg-sprite-loader。

關鍵代碼

src/icons/index.js

const context = require.context("./svg", true, /\.svg$/)

context.keys().map(context)

main.js

import '@/icons'

webpack.base.config.js

{
    test: /\.svg$/,
    loader: "svg-sprite-loader",
    include: [resolve("src/icons")],
    options: {
        symbolId: "icon-[name]"
    }
},
{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: "url-loader",
    exclude: [resolve("src/icons")],
    options: {
        limit: 10000,
        name: utils.assetsPath("img/[name].[hash:7].[ext]")
    }
},

why?

不少人跟我同樣，一開始只想說，爲何這樣就能夠，why???

要知道是什麼，就上打印大法。

const context = require.context("./svg", true, /\.svg$/)
// 看看你是何方神聖
console.log(context)

context.keys().map(context)

下面就真的以一張圖進行解釋，有問題的歡迎留言交流呀！

首發連接