zoukankan      html  css  js  c++  java
  • 一张图带你了解webpack的require.context

    很多人应该像我一样,对于webpackrequire.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)
    

    下面就真的以一张图进行解释,有问题的欢迎留言交流呀!

    一张图说明
    首发链接

  • 相关阅读:
    【POJ3069】Saruman's Army
    【POJ2453】An Easy Problem
    【POJ2386】Lake Counting
    【POJ2251】Dungeon Master
    【POJ1664】放苹果
    【基础】枚举学习笔记
    算法时空复杂度【OI缩水版】
    【POJ2018】Best Cow Fences
    【POJ3889】Fractal Streets(分形图)
    【BZOJ2296】随机种子(构造)
  • 原文地址:https://www.cnblogs.com/wenbinjiang/p/11165756.html
Copyright © 2011-2022 走看看