实战：Webpack 的 require 动态变量

1、问题描述：

完全使用变量

代码语言：javascript复制

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的配置

代码语言：javascript复制

// 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 参考官方文档

语法：

代码语言：javascript复制

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

require.context有三个参数：

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

使用介绍：

代码语言：javascript复制

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的导入

代码语言：javascript复制

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

import官网介绍：在这里

webpack javascript 打包

0 人点赞