[Vue]webpack的require与require.context
1.require
1.1完整路径的require语句:
require('tools'); //preset alias tools
require('./js/main');
1.2带表达式的 require 语句:自动创建一个上下文(context)
如果你的 require参数含有表达式(expressions),会自动创建一个上下文(context),因为在编译时(compile time)并不清楚具体是哪一个模块被导入。
如:
require('./template/' + name + '.ejs');
webpack 解析 require() 的调用,提取出来如下这些信息:
Directory: ./template
Regular expression: /^.*\.ejs$/
会返回template目录下的所有后缀为.ejs模块的引用,包含子目录:
{
"./table.ejs": 42,
"./table-row.ejs": 43,
"./directory/folder.ejs": 44
}
2.require.context:手动创建一个上下文(context)
require.context(directory, useSubdirectories = false, regExp = /^\.\//);
directory:指定要打包的目录;
useSubdirectories :是否搜寻子目录;
regExp :匹配的正则 例:
require.context("./test", false, /\.test\.js$/);
//(创建了)一个包含了 test 文件夹(不包含子目录)下面的、所有文件名以 `.test.js` 结尾的、能被 require 请求到的文件的上下文。
详情参照官网:https://webpack.docschina.org/guides/dependency-management/#带表达式的-require-语句
[Vue]webpack的require与require.context的更多相关文章
- 一字一句的搞懂vue-cli之vue webpack template配置
webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对尤大的vue-cli感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部 ...
- 【原创】从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(二)
摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是本着 ...
- Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
- Vue + Webpack + Vue-loader 1
Vue + Webpack + Vue-loader 原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue ...
- 从零开始:一个正式的vue+webpack项目的目录结构是怎么形成的
如何从零开始一个vue+webpack前端工程工作流的搭建,首先我们先从项目的目录结构入手.一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样子的?接下来闰土大叔带你们一起手摸手学起 ...
- Vue + webpack 项目实践
Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...
- nodejs, vue, webpack 项目实践
vue 及 webpack,均不需要与nodejs一期使用,他们都可以单独使用到任何语言的框架中. http://jiongks.name/blog/just-vue/ https://cn.vuej ...
- 从0开始搭建vue+webpack脚手架(三)
在从0开始搭建vue+webpack脚手架(二)中已经基本完成了开发环境的配置.当开发完成后,我们需要将完成的项目进行打包,接下来对打包做一些优化: 运行 $ npm run build 可生成dis ...
- 从0开始搭建vue+webpack脚手架(二)
接着从0开始搭建vue+webpack脚手架(一) 三.配置webpack-dev-server 1. webpack-dev-server自带一个node的服务器, 项目在服务端运行的同时可以实现热 ...
- vue+webpack开发(一)
一开始接触这个vue+webpack的时候,实在是摸不着头脑,根本无从下手. 但是经过这两天的研究,其实你会发现vue其实并不难,难度都在webpack你对webpack的理解. webpack顾名思 ...
随机推荐
- 004-集成maven和Spring boot的profile功能打包
参考地址:https://blog.csdn.net/lihe2008125/article/details/50443491 一.主要目标 1.通过mvn在命令行中打包时,可以指定相应的profil ...
- matlab 保存图片的几种方式
最近在写毕业论文, 需要保存一些高分辨率的图片. 下面介绍几种MATLAB保存图片的 方式. 一. 直接使用MATLAB的保存按键来保存成各种格式的图片 你可以选择保存成各种格式的图片, 实际上对于 ...
- 在MFC中使用一个单独的类实现数据在各个类之间的传递
第一步:使用VS2010创建一个基于MFC的单文档程序,然后 编译 运行 确定没有问题. 第二步:添加一个名叫CGszCommonData 类. 第三步:在应用程序类的头文件里 添加#includ ...
- iOS 定位方式 iOSNsPredicateString 详解
原文地址https://segmentfault.com/a/1190000010205649 前言 由于使用id.className.AccessibilityId定位方式较为简单,多数情况下,在同 ...
- vertical-align和line-height的深入应用
vertical-align和line-height的深入应用 本文的重点是了解vertical-align和line-height的使用 涉及到的名词:基线,底端,行内框,行框,行间距,替换元素及非 ...
- UVA - 12298 Super Poker II (FFT+母函数)
题意:有四种花色的牌,每种花色的牌中只能使用数值的约数个数大于2的牌.现在遗失了c张牌.每种花色选一张,求值在区间[a,b]的每个数值的选择方法有多少. 分析:约数个数大于2,即合数.所以先预处理出5 ...
- 基础知识总结之 jdk部分
第一次安装jdk 按照操作走完 会出现 C:\Program Files\Java\jdk1.8.0_91 和 C:\Program Files\Java\jre1.8.0_91 两个目录 (平级目 ...
- JS正则表达式从入门到入土(4)—— 预定义类与边界
预定义类 正则表达式提供预定义类来匹配常见的字符类 字符 等价类 含义 . [^\r\n] 除了回车符和换行符以外的所有字符 \d [0-9] 数字字符 \D [^0-9] 非数字字符 \s [\t\ ...
- c调用c++编的dll,c++调用c编写的dll,extern “C”的用法
转自:http://blog.csdn.net/life_is_too_hard/article/details/52137271 c和c++不能直接相互调用,主要是因为c++有重载函数的功能,为了区 ...
- CF1155D Beautiful Array(动态规划)
做法 \(f_{i,0}\)表示以\(i\)结尾未操作时的最大值 \(f_{i,1}\)表示以\(i\)结尾正在操作时的最大值 \(f_{i,2}\)表示以\(i\)结尾已结束操作时的最大值 Code ...