实战：Webpack 的 require 动态变量

快来打我* 2022-06-06 13:12 87阅读 0赞

**1、问题描述：**

完全使用变量

let test = './less/Test.css'
    require(test);
    //报错  Uncaught Error: Cannot find module "."
    
    let test2 = 'Test'
    require("./less/"+test2 + ".css");
    //报错 Uncaught Error: Cannot find module "./less"

不管怎么样，结果都无法正确拿到文件中的内容。

参考[：官网描述][Link 1]

--------------------

**解决方案：**

**方式1**：网上说是在webpack 中加入下面代码，重新启动就会好使，但是我加了之后，并没有起多大的作用，也可能是我的配置的问题，参考地址[：在这里][Link 2]，下面为`webpack.config.js`的配置

// webpack.config.js
    
    {
      module: {
        // require
        unknownContextRegExp: /$^/,
        unknownContextCritical: false,
    
        // require(expr)
        exprContextRegExp: /$^/,
        exprContextCritical: false,
    
        // require("prefix" + expr + "surfix")
        wrappedContextRegExp: /$^/,
        wrappedContextCritical: false
      }
    }

--------------------

**方式2：采用 require.context**

`require.context` 参考[官方文档][Link 3]

**语法：**

require.context(directory, useSubdirectories = false, regExp = /^\.\//)

`require.context`有三个参数：

*  directory：说明需要检索的目录
 *  useSubdirectories：是否检索子目录
 *  regExp: 匹配文件的正则表达式

使用介绍：

var context = require.context('.', true, /^\.\/less\/.*\.css$/);//参数3正则介绍：扫描./less/目录下所有以.css结尾的文件
    console.log(context.keys());//获取正则less目录下文件，转化成数组形势 =>例如： ['a.css','b.css']等
    const filename = "./less/r.css";
    console.log(context(filename));

参考信息[：在这里][Link 4]  
同时， `require.context` [也可以做这些][Link 5]

--------------------

**PS**：导入的话文件，也可以使用es6的导入

import('lodash.js').then(_ => {
        // Do something with lodash (a.k.a '_')...
    })

`import`官网介绍[：在这里][Link 6]

[Link 1]: https://doc.webpack-china.org/guides/dependency-management/
[Link 2]: https://blog.gaoqixhb.com/p/581ab5b9f143f9631c26d039
[Link 3]: https://webpack.js.org/guides/dependency-management/#require-context
[Link 4]: http://www.jianshu.com/p/78f7b19932cb
[Link 5]: https://cnodejs.org/topic/590c35f6ba8670562a40ed3b
[Link 6]: https://webpack.js.org/api/module-methods/#import-