[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顾名思 ...
随机推荐
- PSR-2 代码风格规范
https://blog.csdn.net/qq_28602957/article/details/52248239 这篇规范是PSR-1(基本代码规范)的扩展和继承. 本规通过制定一系列规范化PHP ...
- PHPcms v9 get标签sql 语句limit无效问题的解决方法
get标签非常好用,自定义模型后get几乎变成万能的了.但是PHPCMS升级到V9后,把2008的很多功能都去掉了,比如get标签中,在后面自动添加了一个LIMIT 0,20,这样你即使写了num=' ...
- (转)C语言中Exit函数的使用
C语言中Exit函数的使用 exit() 结束当前进程/当前程序/,在整个程序中,只要调用 exit ,就结束return() 是当前函数返回,当然如果是在主函数main, 自然也就结束当前进程了,如 ...
- Linux系统——最小化安装
一.虚拟机进行Linux minimal 安装 网络连接:选择“自定义”——>VMnet8(NAT模式) #PC与NAT网络的虚拟机在不同网段,此时虚拟网卡作为网关建立通信 NAT模式可直接上I ...
- 基于HTML5 FileSystem API的使用介绍(转)
FileSystem提供了文件夹和文件的创建.移动.删除等操作,大大方便了数据的本地处理, 而且所有的数据都是在沙盒(sandboxed)中,不同的web程序不能互相访问,这就保证了数据 的完整和安全 ...
- HashMap底层原理
原文出自:http://zhangshixi.iteye.com/blog/672697 1. HashMap概述: HashMap是基于哈希表的Map接口的非同步实现.此实现提供所有可选的映射 ...
- vue-cli中的.babelrc文件介绍
转载自:http://www.cnblogs.com/ye-hcj/p/7071850.html { // 此项指明,转码的规则 "presets": [ //个人认为多此一举 [ ...
- 300. Longest Increasing Subsequence(LIS最长递增子序列 动态规划)
Given an unsorted array of integers, find the length of longest increasing subsequence. For example, ...
- Winter-1-C A + B II 解题报告及测试数据
Time Limit:1000MS Memory Limit:32768KB Description I have a very simple problem for you. Given two i ...
- Jmeter使用流程及简单分析监控(转载)
转载自:https://www.cnblogs.com/linglingyuese/archive/2013/03/04/linglingyuese-one.html#undefined 一.安装Jm ...