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官网介绍:在这里