Webpack 的 require 动态变量
作者:Rkatsiteli 来源:blog.csdn.net 更新时间:2023-05-25 21:55
2017年11月09日 17:55:38 阅读数 4726
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"
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
不管怎么样,结果都无法正确拿到文件中的内容。
参考:官网描述
解决方案:
方式1:网上说是在webpack 中加入下面代码,重新启动就会好使,但是我加了之后,并没有起多大的作用,也可能是我的配置的问题,参考地址:在这里,下面为webpack.config.js
的配置
// webpack.config.js
{
module: {
// require
unknownContextRegExp: /$^/,
unknownContextCritical: false,
// require(expr)
exprContextRegExp: /$^/,
exprContextCritical: false,
// require("prefix" + expr + "surfix")
wrappedContextRegExp: /$^/,
wrappedContextCritical: false
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
方式2:采用 require.context
require.context
参考官方文档
语法:
require.context(directory, useSubdirectories = false, regExp = /^\.\//)
- 1
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));
- 1
- 2
- 3
- 4
- 5
参考信息:在这里
同时, require.context
也可以做这些
PS:导入的话文件,也可以使用es6的导入
import('lodash.js').then(_ => {
// Do something with lodash (a.k.a '_')...
})
- 1
- 2
- 3
import
官网介绍:在这里
上一篇:vuex模块化 下一篇:vue中避免 v-if 和 v-for 用在一起