webpack批量引入文件

ღ张明宇࿐

已于 2023-04-05 23:05:59 修改

阅读量370

点赞数

文章标签： webpack javascript 前端

于 2023-04-05 23:05:47 首次发布

本文链接：https://blog.csdn.net/zmx781284440/article/details/129978623

版权

文章介绍了require.context函数在不同场景下的使用，如在store模块化中组织代码，封装SVG图标组件，以及在Vue项目中批量引入和注册组件。require.context允许动态地按需加载模块，提高代码的组织性和效率。

摘要由CSDN通过智能技术生成

require.context参数介绍：

require.context(directory,useSubdirectories,regExp)

directory:表示检索的目录
useSubdirectories：表示是否检索子文件夹
regExp:匹配文件的正则表达式,一般是文件名

第一种场景：在store模块化中使用

const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

第二种情景：封装svg-icon组件时使用

const req = require.context('./svg', false, /\.svg$/)

const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

第三种情景：在main.js中引入大量组件

const requireComponents = require.context('../views/components', true, /\.vue/)
// 打印结果
// 遍历出每个组件的路径
requireComponents.keys().forEach(fileName => {
  // 组件实例
  const reqCom = requireComponents(fileName)
  // 截取路径作为组件名
  const reqComName =reqCom.name|| fileName.replace(/\.\/(.*)\.vue/,'$1')
  // 组件挂载
  Vue.component(reqComName, reqCom.default || reqCom)
})

第三种情景：在vue文件中引入大量组件

const path = require("path")
const files = require.context("@/views/00-99/requireContext/components", false, /\.vue$/)
const modules = {}
files.keys().forEach((key) => {
  const name = path.basename(key, ".vue")
  modules[name] = files(key).default || files(key)
})
export default {
  components: modules,
}