会员

贴心博客(Imblog)

基于`Imcat(贴心猫)+(微样式)Weys`开发

es6模块动态引入(require- import)

2021-10-19 08:02 学习

https://blog.csdn.net/liubangbo/article/details/105028135

动态引入(require, import)

本篇基于图片加载的基础来简单介绍require, require.context和import的区别!

现如今的前端项目用webpack打包已经成为了行业趋势,然而在此模式的前提下,图片的引入是我们不可避免的问题。正常的图片引入是用img标签或者元素背景图的方式,采用这种方式的图片,webpack都能正常打包并显示。但是如果直接在js文件中定义图片路径,并赋给图片元素的话不能正常显示的,这是因为webpack打包后,会将静态资源文件放在dist/static/img下,我们的网站实际上以dist目录作为根目录,并由此加载该目录下的index.html所需的css、js、img等。而当我们在js文件中动态引入图片时url-loader是无法探测到图片路径的。我们build后发现,图片根本不会打包输出到dist目录(webpack是按需打包的)。

官方文档:如果你的 request 含有表达式(expressions),会创建一个上下文(context),因为在编译时(compile time)并不清楚具体是哪一个模块被导入。

原因:

webpack本身是一个预编译路径 不能require纯变量的打包工具,无法预测未知变量路径
require(path) ,path 至少要有三部分组成, 目录,文件名和后缀
目录:webpack 才知道从哪里开始查找
后缀 文件后缀,必须要加上,不然会报错
文件名:可用变量表示

1. 错误引用
path = '@/static/mock/shops-lists.json'; 
let obj = require(path)

2. 正确引用
path = 'shops-lists.json'; 
let obj = require('@/static/mock/'+path)
或:
let obj = require('../../static/mock/shops-lists.json')
let obj = require('@/static/mock/shops-lists.json')

来源:(原创) 编辑:peace 关键词:es6,模块,动态引入,require,import

    More 心情墙

  • 4 因疫情影响,业绩未达标; 因疫情影响,学习没上去; 因疫情影响,个人失业; 因疫情影响,公司倒闭; 因疫情影响,单身、耽误结婚、忘记生孩子 …还很多呢!
  • 5 现在啊,夫妻情侣牵手都不像样子:各自看着手机! 他(她)的手不如让我来牵算了。
  • 5 中国是美国最大军事威胁;美国是世界最大军事威胁。
  • 804 不想(织梦)授权的伙伴,你也多了一条免费之路 ---`贴心博客(Imblog)`!
  • 有所为,有所不为,是为华为! 凝心聚力,中华有为!

    22 2019-06-02

  • 2019愿望: 1.多健身少生病;2.学习英语,心理学;3.发布`贴心博客`,`贴心企业网`,`贴心房产网`(部分合作开发)...

    27 2018-12-31

  • 愿与[企业,客户]三方利益达到最佳平衡!

    4 2018-12-16

    More 和平鸽小语

  • 5 健康第一,X无止境,努力YY,积极ZZ !
  • 710 业余系统,开源分享;从未忘记,初心梦想。
  • 736 中国年=人民币: Happy CNY, I get a CNY 8.8 red envelope. 慢慢去体会,用一生去体会!
  • 692 2019:经济危机后;Android,鸿蒙,iOS将三足鼎立 想起:非暴力不合作;该赶美企,抵美货了...
导航
博客文章
便笺墙
家族亲友树
联系我们
地址:银河县太阳镇地球村
电话:135-37****47
邮箱:80893510@qq.com

Copyright@贴心博客(Imblog)

Run:1.496/18.444(ms); 6(sql)/2.095(MB); comm:info/detail; Upd:2021-12-02 02:14:25