webpack2.x 中文文档翻译之依赖管理 Dependency Management

raledong 发布于2019-08-20 14:42 / 2883人阅读

摘要：依赖管理该条已在中文网存在，点击这里表达式来调用当你的请求包含表达式，那个一个上下文环境将被创建。一个包含所有父文件夹和子及后代文件夹中以结尾的文件的上下文。一个函数，返回一个数组，包含上下文模块能够处理的所有的请求。

依赖管理 Dependency Management

该条已在webpack2.x中文网存在，点击这里

es6 modules

commonjs

amd

表达式来调用 require with expression

当你的请求包含表达式，那个一个上下文环境将被创建。这个需要的模块被编译的时候是未知的。
例子：

require("./template/" + name + ".ejs");

webpack 解析require语句，并且摘出一些信息：

Directory: ./template
Regular expression: /^.*.ejs$/

上下文模块 context modules

一个上下文模块(context module)被生成之后，它包含目录模块的所有引用，并且能够被一个相匹配的正则表达式调用。
上下文模块包含一个map，能够把请求翻译成模块的id。

例子：

{
    "./table.ejs": 42,
    "./table-row.ejs": 43,


    "./directory/folder.ejs": 44
}

上下文模块(context module)也包含一些运行时逻辑(runtime logic)--可以访问到map。

这意味着支持一步调用，但是这也会导致所有相关的模块将被包含在bundle（被编译后的文件）中。

require.context

你可以创建自己的上下文，通过使用require.context方法（函数）。
它允许传递一个路径，正则表达式和一个标记——如果子目录允许被搜索匹配的话。

webpack 在这个上下文模块被创建的时候解析require.context()函数。

语法如下：

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

例子：

require.context("./


", false, /.test.js$/);
// test文件中所有的以`test.js`结尾的文件将能够被调用，这就是该语句创建的上下文环境。

require.context("../", true, /.stories.js$/);
// 一个包含所有父文件夹和子及后代文件夹中以`.stories.js结尾的文件的上下文。

context module API

一个上下文模块(context module)导出一个（require）函数，它包含一个参数——一个请求。
这个函数有三个属性:resolve, keys, id.

resovle 一个函数，返回请求模块的id。

keys 一个函数，返回一个数组，包含上下文模块能够处理的所有的请求。
这个在你想要调用匹配到的所有的文件时很有用，例如：

function importAll (r) {
r.keys().forEach(r);
}
importAll(require.context("../components/", true, /.js$/));

var cache = {};
function importAll (r) {
r.keys().forEach(key => cache[key] = r(key));
}
importAll(require.context("../components/", true, /.js$/));
// At build-time cache will be polulated with all required modules.

id 是指上下文模块的id，这个也许在module.hot.accept中很有用。

云服务器混合云中文翻译 webrtc中文翻译源码中文说明之依赖管理工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81847.html

webpack2.x 中文文档翻译之分离库代码Code Splitting - Librari

摘要：浏览器需要重新下载打包后的文件，即使文件的绝大部分都没有变化。分离并且以来命名新的入口能够缓和当前的问题。现在运行绑定的检查结果是只是被绑定到这个绑定文件中。分离库代码Code Splitting - Libraries 这个在webpack2.x中文网已存在，点击这里让我们想一个简单的应用——momentjs，他是一个事件格式化的库。安装moment. npm install -...

elva 2019-08-20 14:43 评论0 收藏0
webpack2.x 中文文档翻译之开发Development

摘要：下载完成之后你可以这样启动它如果控制台提醒这个指令无效，可以尝试最好的方法是在中添加命令如下上述命令会使浏览器自动打开到地址。下载完成，如下使用。开发Development 在这篇中我们将说明怎样开始开发，以及增从三个工具中择一进行开发。假使你已经设置了webpack.config.js设置文件。该文档已在webpack2.x中存在，点击这里永远不要再生产产品中使用这些工具，绝对...

GeekGhc 2019-08-20 14:40 评论0 收藏0
webpack2.x 中文文档翻译之公开路径(pbulic path)

摘要：公开路径该条已在中文网存在点击这里有一个非常有用的设置，允许你设置一个所有资源的基础路径在你的应用中。使用案例这里有有些实际应用中的案例，其中它使用的非常灵活。公开路径(pbulic path) 该条已在webpack2.x中文网存在,点击这里 webpack有一个非常有用的设置，允许你设置一个所有资源的基础路径在你的应用中。它叫做publicPath。使用案例(Use cases...

W4n9Hu1 2019-08-20 14:43 评论0 收藏0
webpack2.x 中文文档翻译之出口Output

摘要：出口影响编译的输出告诉怎样编译输出的文件允许多个入口一个出口的情况。该选项实现跨域加载模块可以的值是命名每个出口文件。不必明确绝对路径。使用设置项，设置具体位置。仅仅命名文件名字即可。出口Output 影响编译的输出告诉webpack怎样编译输出的文件允许多个入口一个出口的情况。用法 const config = { output: bundle.js }; module.e...

weizx 2019-08-20 14:42 评论0 收藏0
库&插件&框架&工具

摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享浅谈前端线上部署与运维说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...

Codeing_ls 2019-08-01 18:22 评论0 收藏0