实战:Webpack 的 require 动态变量

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_16559905/article/details/78492350

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:网上说是在webpack 中加入下面代码,重新启动就会好使,但是我加了之后,并没有起多大的作用,也可能是我的配置的问题,参考地址:在这里,下面为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 参考官方文档

语法:

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));

参考信息:在这里
同时, require.context 也可以做这些


PS:导入的话文件,也可以使用es6的导入

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

import官网介绍:在这里

展开阅读全文

没有更多推荐了,返回首页