A map with you to understand webpack of require.context

A lot of people like me should be, for webpackthe require.contextall little knowledge of it. Many online about require.contextuse cases, but I did not find this knowledge can help me understand the point, and it will decide to explore, with the following popular online svgIcon program as an example. By the way, the focus of this paper is require.context, not to explain svg symbolthe program svg-sprite-loader.

Key Code

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?

A lot of people like me, just want to say a start, why so that you can, why ???

You know what, just print Dafa.

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

context.keys().map(context)

Here's a map to really explain, question welcome message exchange Yeah!

Starting link