webpack英文网（七）内容安全策略、Development-Vagrant、管理依赖（考试正则化、require.context）、公共路径（publicpath）、集成（NPMScripts、Grunt、Gulp）
文章目录
总结：
位置字符、通配符、量词、集成 NPMScript（比 grunt 使用更多） 为什么 Grunt 使用 Grunt？ 1. 内容安全政策
webpack 需要为其加载的所有脚本添加随机数。 要启用此功能，需要在导入的入口脚本中设置 __webpack_nonce__ 变量。 应为每个唯一的页面视图生成并提供唯一的基于哈希的随机数，这就是为什么应在入口文件而不是在配置中指定 __webpack_nonce__ 。 请注意，随机数应该是 base64 编码的字符串。
例子
在入口文件中：
// ...
__webpack_nonce__ = 'c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=';
// ...
启用CSP
请注意，默认情况下不启用 CSP。 相应的CSPheader或meta标签需要与文档一起发送，以告诉浏览器启用CSP。 以下是包含 CDN 白名单 URL 的 CSPheader 示例：
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;
有关 CSP 和 nonce 属性的更多信息，请参阅页面顶部的进一步阅读部分。
延伸阅读 2. 开发 - Vagrant
如果你正在开发一个比较中级的项目，并且使用 Vagrant 在虚拟机（Virtual Machine）上运行你的开发环境（developmentenvironment），那么你可能需要在虚拟机上运行 webpack。
项目配置
首先，确保 Vagrantfile 有固定的 IP。
Vagrant.configure("2") do |config|
config.vm.network :private_network, ip: "10.10.10.61"
end
下一步是在项目中安装 webpack 和 webpack-dev-server。
npm install --save-dev webpack webpack-dev-server
确保配置文件 webpack.config.js 已设置。 如果没有，下面的示例代码可以用作入门的简单配置：
module.exports = {
context: __dirname,
entry: "./app.js"
};
之后创建一个index.html 文件。 里面的脚本标签应该指向你的包。 如果配置中未设置output.filename，则其默认值为bundle.js。
<!doctype html>
<html>
<head>
<script src="/bundle.js" charset="utf-8"></script>
</head>
<body>
<h2>Heey!</h2>
</body>
</html>
请注意，您还需要创建一个 app.js 文件。
启动服务器
现在我们可以启动服务器：
webpack-dev-server --host 0.0.0.0 --public 10.10.10.61:8080 --watch-poll
默认情况下，服务器只允许本地访问。 通过修改--host参数，我们就可以在我们的PC上访问它了。
webpack-dev-server 将添加一个脚本来连接到捆绑包中的 WebSocket。 一旦您的文件被修改，服务器将重新加载应用程序。 --public 参数是告诉脚本在哪里找到WebSocket。 服务器默认使用8080端口，我们这里也需要标记一下。
--watch-poll 确保 webpack 可以测量文件的更改。 在默认配置下，webpack 会监听文件系统触发的相关事件，但 VirtualBox 总会出现这样或那样的问题。
现在应该可以通过 :8080 访问服务器。 如果您更改 app.js，应用程序将重新加载。
nginx 的中级用法
为了更好地模拟类似生产的环境，还可以使用nginx来代理webpack-dev-server。
在 nginx 配置文件中，添加以下代码：
server {
location / {
proxy_pass http://127.0.0.1:8080;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
error_page 502 @start-webpack-dev-server;
}
location @start-webpack-dev-server {
default_type text/plain;
return 502 "Please start the webpack-dev-server first.";
}
}
proxy_set_header这几行的配置非常重要，因为它们关系到WebSocket的正确运行。
上一节启动webpack-dev-server的命令可以改为：
webpack-dev-server --public 10.10.10.61 --watch-poll
现在服务器只能通过127.0.0.1访问，这没什么大不了的，因为ngnix可以让你的PC能够访问服务器。
概括
我们是否可以从固定IP访问Vagrantbox，然后因为webpack-dev-server是暴露的，所以浏览器可以直接访问。 最终解决了VirtualBox不调度文件系统干扰导致服务器无法重新加载文件修改的常见问题。
3. 管理依赖关系
es6模块
普通js
AMD
需要带有表达式的句子
如果你的请求富含表达式（expressions），就会创建一个上下文（context），因为在编译时（compiletime）并不清楚导出的是哪个模块。
例子：
require("./template/" + name + ".ejs");
webpack 解析 require() 的调用并提取以下信息：
Directory: ./template
Regular expression: /^.*.ejs$/
具有上下文的模块
（译者注：这里的请求应该指的是require()语句中的表达式，如“./template/”+name+“.ejs”）生成一个带有上下文的模块。 它包含对目录中所有模块的引用，此类模块只能由“与请求匹配的正则表达式”需要。 上下文模块包含一个映射对象，它将请求中的所有模块转换为相应的模块 ID。
例子：
{
"./table.ejs": 42,
"./table-row.ejs": 43,
"./directory/folder.ejs": 44
}
上下文模块还包含一些访问此地图对象的运行时逻辑。
这意味着webpack只能支持动态require，但它会导致所有可能的模块都包含在bundle中。
需要上下文
您还可以使用 require.context() 方法创建自己的（模块）上下文。
您可以向此方法传递 3 个参数：要搜索的目录、是否也应搜索其子目录以及匹配文件的正则表达式。
webpack 在构建时会解析代码中的 require.context() 。
句型如下：
require.context(directory, useSubdirectories = false, regExp = /^.//)
例子：
require.context("./test", false, /.test.js$/);
// （创建了）一个包含了 test 文件夹（不包含子目录）下面的、所有文件名以 `.test.js` 结尾的、能被 require 请求到的文件的上下文。
require.context("../", true, /.stories.js$/);
// （创建了）一个包含了父级文件夹（包含子目录）下面，所有文件名以 `.stories.js` 结尾的文件的上下文。
传递给 require.context 的参数必须是文字！
上下文模块API
上下文模块导入一个带有一个参数的（require）函数：request。
import方法有3个属性：resolve、keys、id。
例如webpack公共路径，如果要导入某个文件夹下的所有文件，或者导入与正则表达式匹配的文件，可以这样做：
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$/));
// 在构建时，所有被 require 的模块都会被存到（上面代码中的）cache 里面。
4.公共路径（公共路径）
webpack 提供了一个特别有用的配置，可以帮助您为项目中的所有资源指定基本路径。 它被称为公共路径（publicPath）。
例子
以下是一些示例，在实践中，可以在保持高度清洁的同时实现该示例的功能。
构建项目时设置路径值
在开发模式下，我们一般都会有一个assets/文件夹，它往往存放在与主页同级的目录下。 这非常方便； 而如果在生产环境中，想要使用CDN统一加载这种静态文件，该怎么办？
为了解决这个问题，您可以使用历史悠久的环境变量。 例如，假设我们设置一个名为 ASSET_PATH 的变量：
import webpack from 'webpack';
// 如果预先定义过环境变量，就将其赋值给`ASSET_PATH`变量，否则赋值为根目录
const ASSET_PATH = process.env.ASSET_PATH || '/';
export default {
output: {
publicPath: ASSET_PATH
},
plugins: [
// 该插件帮助我们安心地使用环境变量
new webpack.DefinePlugin({
'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH)
})
]
};
动态设置路径值
另一种可能的情况是我们需要动态设置公共路径。 webpack 提供了一个全局变量供你设置，它叫做 __webpack_public_path__。 因此，在您的项目条目中，您可以简单地设置以下内容：
__webpack_public_path__ = process.env.ASSET_PATH;
一切都已准备就绪。 由于我们的配置项中已经使用了DefinePlugin，所以process.env.ASSET_PATH已经被定义了，所以我们就安心使用吧。
**警告：** 请注意，如果您在入口文件中使用 ES6 模块导出，请在导出后为 __webpack_public_path__ 创建一个正式参数。 在这些情况下，您必须将 publicpath 参数移至您自己的专用模块，然后将其导出到 entry.js 上方：
// entry.js
import './public-path';
import './app';
5. 集成
首先我们必须澄清一个常见的误解。 webpack 是一个模块捆绑器（modulebundler）（例如，Browserify 或 Brunch）。 它不是任务运行程序（例如，Make、Grunt 或Gulp）。 任务执行器用于手动处理常见的开发任务webpack公共路径，例如项目检测（lint）、构建（build）和测试（test）。 与捆绑器（bundler）相比，任务执行器专注于更底层的问题。 您可以从使用底层工具中受益，并将打包部分留给 webpack。
捆绑器（bundler）可帮助您获取用于部署的 JavaScript 和样式表，并将它们转换为适合浏览器的可用格式。 例如，JavaScript 可以通过压缩、分割块和延迟加载来提高性能。 打包是Web开发中最重要的挑战之一，解决这个问题可以消除开发过程中的大部分痛点。
好消息是，尽管有一些重复的功能，但如果以正确的形式处理，任务运行器和模块捆绑器可以一起工作。 本手册提供了如何将 webpack 与一些流行的任务运行器集成的高级概述。
NPM脚本
常见的 webpack 用户使用 npmscripts 作为任务运行程序。 这是一个更好的开始。 但跨平台支持是一个问题，因此有一些解决方案。 许多用户（但不是大多数）直接使用 npmscripts 以及各种级别的 webpack 配置和工具来执行构建任务。
因此，虽然 webpack 的核心重点是捆绑，但您可以使用各种扩展来完成任务运行程序常见的任务。 集成单独的工具可以降低复杂性，因此请务必权衡集成的利弊。
咕噜声
对于那些使用 Grunt 的人，我们推荐 grunt-webpack 包。 使用 grunt-webpack，您可以将 webpack 或 webpack-dev-server 作为任务执行、访问模板标签中的统计信息、拆分开发和生产配置等。 如果你还没有安装 grunt-webpack 和 webpack，请先安装它们：
npm install --save-dev grunt-webpack webpack
然后注册配置并加载任务：
Gruntfile.js
const webpackConfig = require('./webpack.config.js');
module.exports = function(grunt) {
grunt.initConfig({
webpack: {
options: {
stats: !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
},
prod: webpackConfig,
dev: Object.assign({ watch: true }, webpackConfig)
}
});
grunt.loadNpmTasks('grunt-webpack');
};
