重读webpack5
基础补充
关于harmony modules ES2015 modules
又叫做 harmony modules
关于副作用:
webpack的 side effect副作用
,是指在import后执行特定行为的代码,而不是export一个或者多个,例如 pollyfill
,全局css样式等
关于entry: entry
对象是webpack开始 build bundle
的地方。
关于context: context
是包含入口文件的目录的绝对字符串,默认就是当前目录,但是建议设置。
关于依赖图:
webpack是 dynamically bundle
依赖通过依赖图 dependency graph,避免打包没用的module。
关于Loader:
module loader可链式调用,链中的每个loader都将处理资源,调用顺序是反的。
关于图片:
webpack5内置了处理图片、字体文件,不需要额外的loader来处理 。
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
}
关于 csv、xml
csv-loader来加载csv文件数据, xml-loader来加载xml文件数据 。
可以使用 parser
而不是loader来处理toml, yamljs and json5格式的资源,如下
// webpack.config.js
const yaml = require('yamljs');
module: {
rules: [
{
test: /\.yaml$/i,
type: 'json',
parser: {
parse: yaml.parse,
}
}
]
}
// 代码中使用
import yaml from './data.yaml';
console.log(yaml)
关于html-webpack-plugin:html-webpack-plugin
安装方式 npm i --save-dev html-webpack-plugin@next
关于manifest
webpack使用manifest来track module映射到bundle的关系,使用webpack-manifest-plugin
关于sourceMap source maps
用做track js的error和warning,可以把编译后的代码指向源代码,定位异常的确切位置。
ESM
就是ECMAScript Modules,在package.json 中增加如下配置,强迫项目中的文件,使用ESM
{
"type": "module"
}
除了这种方式, 文件可以设置模块方式通过 .mjs 或者 .cjs 的后缀.
.mjs强迫使用ESM模块 ,.cjs就是 CommonJs模块.
shim
两种情况,全局变量如jq或者浏览器polyfill。
ProvidePlugin让一个包在webpack的编译过程中作为一个可用变量,最后webpack发现这个变量使用了,就会在最后的
bundle中引入此包。例如把lodash变成全局变量,这样在模块中就不需要import了
plugins: [
new webpack.ProvidePlugin({
_: 'lodash',
})
]
如果只需要lodash的一个chunk方法
new webpack.ProvidePlugin({
join: ['lodash', 'join']
})
polyfill,详情
Asset Modules
Asset Modules 是一种允许用户使用assets文件(字体、图标等)而无需配置额外加载器的module。
webpack5之前,使用
raw-loader 以字符串形式导入文件
url-loader 将文件作为data URI内联到bundle中
file-loader 将文件发送到输出目录
Asset Modules使用如下方式来替代拿些loader
asset/resource 生成一个单独的文件并导出URL。以前可以通过使用file-loader实现
asset/inline 导出assets的data URI。以前可以通过使用url-loader实现
asset/source 导出资产的源代码。以前可以通过使用raw-loader实现
asset 自动选择是导出data URI还是生成单独的文件。以前可以通过使用具有asset大小限制的url-loader实现
如果使用webpack5,但是又不想修改之前的loader配置,可这么修改 type: 'javascript/auto'
这会停止asset module 再次处理那些assets
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
}
}
],
type: 'javascript/auto'
},
exclude 那些使用asset loader处理的新url
{
test: /\.(png|jpg|gif)$/i,
dependency: { not: ['url'] },
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
}
}
]
}
resource assets
// 如下,处理png文件
module: {
rules: [
{
test: /\.png/,
type: 'asset/resource'
}
]
},
// 源代码
import mainImage from './images/main.png';
img.src = mainImage; // '/dist/151cfcfa1bd74779aadb.png'
自定义输出名
默认,asset/resource modules 使用 [hash][ext][query
]` 的文件导出到输出文件夹,
我们可以修改这个使用output.assetModuleFilename
覆盖
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
assetModuleFilename: 'images/[hash][ext][query]'
}
另外一种方法,是在rules中配置
{
test: /\.html/,
type: 'asset/resource',
generator: {
filename: 'static/[hash][ext][query]'
}
}
Inline assets
// 配置
{
test: /\.svg/,
type: 'asset/inline'
}
// 源代码
import metroMap from './images/metro.svg';
block.style.background = `url(${metroMap})`; // url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo...vc3ZnPgo=)
自定义 data URI 生成器
默认webpack是使用base64算法实现的,也可以自定义实现
const path = require('path');
const svgToMiniDataURI = require('mini-svg-data-uri');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.svg/,
type: 'asset/inline',
generator: {
dataUrl: content => {
content = content.toString();
return svgToMiniDataURI(content);
}
}
}
]
},
};
Source assets
module: {
rules: [
{
test: /\.txt/,
type: 'asset/source',
}
]
}
URL assets
// webpack 也会这样创建一个asset module
const logo = new URL('./logo.svg', import.meta.url);
// 不同的目标环境,webpack的处理不同
// target: web
new URL(__webpack_public_path__ + 'logo.svg', document.baseURI || self.location.href);
// target: webworker
new URL(__webpack_public_path__ + 'logo.svg', self.location);
// target: node, node-webkit, nwjs, electron-main, electron-renderer, electron-preload, async-node
new URL(__webpack_public_path__ + 'logo.svg', require('url').pathToFileUrl(__filename));
asset
如下,不指定哪种asset
module: {
rules: [
{
test: /\.txt/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 4 * 1024 // 4kb
}
}
}
]
}
webpack会自动判断resource 还是 inline,如果文件尺寸小于8kb,就会被处理做inline,否则就是resource
可以使用parser.dataUrlCondition来覆盖。
开发服务
每次改了代码,重写打包会很麻烦,有3种解决方法,
webpack的watch模式
webpack-dev-server
webpack-dev-middleware,webpack-dev-middleware是一个包装器,它会将webpack处理过的文件发送到服务器,webpack-dev-server内部使用。
// 1. 使用webpack-dev-server,安装好包之后,在webpack.config.js 中配置
devServer: {
contentBase: './dist',
}
// 2 使用 webpack-dev-middleware和express,安装之后,新建serverjs
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(
webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath,
})
);
// Serve the files on port 3000.
app.listen(3000, function () {
console.log('Example app listening on port 3000!\n');
});
代码分割 codes splitting
lazy load
按需加载是优化应用的一种好方法。这种实践本质上涉及到按逻辑断点拆分代码,
然后在用户完成一些需要(或将需要)新代码块的操作后加载代码。这加快了应用程序的初始加载速度,并减轻了它的整体重量,
因为有些块甚至可能永远不会加载。
entry 分割
这样没什么用,用的lodash还是会整个打到最后的bundle中,虽然可以通过 import chunk from 'lodash/chunk'
这种写法优化
// index.js
import _ from 'lodash'
console.log( _.chunk([1,2,3,4], 2))
// index2.js
import _ from 'lodash'
console.log(_.join(['Another', 'module', 'loaded!'], ' '));
// webpack.config.js
entry: {
index: './src/index.js',
index2: './src/index2.js',
}
Prevent Duplication
入口的 dependOn
字段和 runtimeChunk: 'single'
的方法
// 入口配置
entry: {
index: {
import: './src/index.js',
dependOn: 'shared',
},
index2: {
import: './src/index2.js',
dependOn: 'shared',
},
shared: 'lodash',
}
// webpack.config.js
optimization: {
runtimeChunk: 'single',
}
SplitChunksPlugin
允许我们将共同的依赖提取到一个现有的入口文件块或一个全新的chunk中。
module.exports = {
entry: {
index: './src/index.js',
another: './src/another-module.js',
},
optimization: {
splitChunks: {
chunks: 'all',
},
},
};
动态导入 dynamic import
使用 require.ensure
或者 import()
// index.js
// 我们需要 default 值的原因是,自从webpack 4以来,当导入CommonJS模块时,导入将不再解析为module.exports的值
import('lodash').then(({default: _}) => {
console.log(
_.chunk([1, 2, 3, 4], 2)
)
})
Prefetching/Preloading modules
- prefetch 预获取: 将来可能需要一些资源来支持运行。
- preload 预加载: 在当前运行期间需要的资源。
- preload chunk和父 chunk并行加载,prefetch chunk在父块加载完成后开始加载。
- preload chunk具有中等优先级并立即下载。当浏览器空闲时,才会下载 prefetch chunk。
- 父块应该立即请求preload chunk,prefetch chunk可能在将来的任何时候使用。
- 浏览器支持不同。
- 一个简单的预加载例子是,有一个总是依赖于一个大库的组件,这个库应该在一个单独的块中,例如
import(/* webpackPreload: true */ 'ChartingLibrary');
- webpackPreload 不正确使用会对性能产生影响,谨慎使用。
缓存
浏览器会缓存文件,这会让web加载更快,减少不必要的流量。但是编译文件更新了就会造成麻烦。
Output Filename
contenthash
会根据文件内容计算一个字符串,文件内容变了就会改变。
但是哪怕内容重新打包,hash也不一定一样,webpack版本新的应该没这个问题,这是因为webpack在entry块中包含了某些样板文件,特别是 runtime 和 manifest。
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
}
提取样板
SplitChunksPlugin 可以用于将module拆分为单独的bundle。webpack提供了一个优化特性,可以使用optimize.runtimecchunk
选项将运行时代码分割成一个单独的chunk。将其设置为single,为所有块创建单个运行时bundle.
optimization: {
runtimeChunk: 'single',
}
会得到下边的结果
Asset Size Chunks Chunk Names
runtime.cc17ae2a94ec771e9221.js 1.42 KiB 0 [emitted] runtime
main.e81de2cf758ada72f306.js 69.5 KiB 1 [emitted] main
index.html 275 bytes [emitted]
提取第三方库,像react等,它们一般不会变化,使用 cacheGroups
如下
optimization: {
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'common-libs',
chunks: 'all',
}
}
}
}
得到如下结果
asset common-libs.e6d769d50acd25e3ae56.js 1.36 MiB [emitted] [immutable] (name: common-libs) (id hint: vendor)
asset runtime.2537ce2560d55e32a85c.js 15.9 KiB [emitted] [immutable] (name: runtime)
asset index.f9c0d8e7e437c9cf3a6e.js 1.81 KiB [emitted] [immutable] (name: index)
asset index.html 370 bytes [emitted]
Module ID
如果在index.js,增加一个引用新的文件的使用,重新打包,会发现,所有的hash都变了,但是公用库内容没变,hash还是变了,因为增加了新的文件会导致它们的moduleid发生变化,所以hash也变了。在配置中增加如下。
optimization: {
// 告诉webpack在选择 模块id 时使用哪种算法,默认false
moduleIds: 'deterministic'
}
用webpack5测试,只有index.js的hash变了,runtime chunk 和 common-libs 都没变。
环境变量
webpack内置了环境变量的设置方法,
npx webpack --env NODE_ENV=local --env production --progress
但是module.exports必须是个方法
const path = require('path');
module.exports = env => {
// Use env.<YOUR VARIABLE> here:
console.log('NODE_ENV: ', env.NODE_ENV); // 'local'
console.log('Production: ', env.production); // true
return {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
};
Production
开发和生产的目标差别很大。在开发中,我们需要强大的 source map 和一个本地主机服务器,可以实时重新加载或热模块替换。
在生产环境中,我们的目标转向关注小尺寸的bundle、轻量级的源映射和优化assets,以提高加载时间。
出于这种逻辑分离的目的,我们通常建议为每个环境编写单独的webpack配置。
新建webpack.common.js
保存开发和生产共有的代码,webpack.dev.js
和 webpack.prod.js
配置各自环境,
需要 webpack-merge
来merge配置
依赖管理
如果你的require包含表达式则会创建一个上下文,因此在编译时不知道确切的模块
// 源目录
- modules/fn1.js
/fn2.js
// 源代码
let name = 'fn1';
const f = require("./modules/" + name + '.js')
console.log(f);
// webpack 这么处理
Directory: ./modules
Regular expression: /^.*\.js$/
生成一个context module。它包含了对该目录中所有模块的引用,匹配正则表达式的请求可能需要这些模块。
context模块包含一个映射,它将请求转换为模块id。
// webpack打包后有这么一个文件
var map = {
"./fn1.js": 430,
"./fn2.js": 698
};
这意味着支持动态需求,但会导致所有匹配的模块都包含在bundle中。
热更新 HMR
开启
如果是使用 webpack-dev-middleware
那么需要使用 webpack-hot-middleware
来开启热更新
// 在devserver开启
devServer: {
contentBase: './dist',
hot: true,
}
使用 node api
const webpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');
const config = require('./webpack.config.js');
const options = {
contentBase: './dist',
hot: true,
host: 'localhost',
};
webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);
server.listen(5000, 'localhost', () => {
console.log('dev server listening on port 5000');
});
摇树 Tree Shaking
摇树是用来删没用的代码的,它依赖于ES2015模块语法的静态结构就是 import 和 export,是由rollup发展而来。
webpack2之后,内置了对es6的支持以及未使用模块导出的检测。
webpack4扩展了这个功能,通过package.json的 sideEffects 字段,来表明 "纯文件" 可以安全删除。
源代码
// math.js
export function square(x) {
return x * x;
}
export function cube(x) {
return x * x * x;
}
// index.js
import {cube} from './math.js';
console.log(cube(5))
webpack.config.js
mode: 'development',
optimization: {
usedExports: true,
},
打包后的文件,没用的代码并没有删除
/*!*********************!*\
!*** ./src/math.js ***!
\*********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "cube": () => /* binding */ cube
/* harmony export */ });
/* unused harmony export square */
function square(x) {
return x * x;
}
function cube(x) {
return x * x * x;
}
/***/ })
下边是没配置 usedExports: true,这个配置的作用,就是让webpack来判断哪些模块没使用,此配置依赖于
optimization.providedExports(告诉webpack哪些export是由模块提供的),默认就是true
/*!*********************!*\
!*** ./src/math.js ***!
\*********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "square": () => /* binding */ square,
/* harmony export */ "cube": () => /* binding */ cube
/* harmony export */ });
function square(x) {
return x * x;
}
function cube(x) {
return x * x * x;
}
/***/ })
在100% ESM模块的世界中,识别副作用是很简单的,但是现在没到哪一步,所以需要在package.json中的sideEffects来告诉webpack,
标记文件在副作用树,上面提到的所有代码都没有副作用,所以我们可以简单地将该属性标记为false,以通知webpack它可以安全地修剪未使用的导出文件。
// 开启后,打包后的死代码,仍然没删除
{
"name": "your-project",
"sideEffects": false
}
// 如果有些文件确实有副作用,提供一个数组即可
{
"name": "your-project",
"sideEffects": [
"./src/some-side-effectful-file.js"
]
}
注意,如果使用css-loader等加载样式,需要把css放到副作用数组中,防止在生产模式的时候,被webpack无意中删除。
还可以在webpack.config.js中的module.rules中的一个rule中指定。
{
"name": "your-project",
"sideEffects": [
"./src/some-side-effectful-file.js",
"*.css"
]
}
side effects 和 usedExports(摇树)的区别
side effects可以直接抹去文件,例如
如果设置了 sideEffects: false
, 然后在index.js引入一个 math.js但是不使用,打包后的bundle不会打包math.js
但是如果没设置,不使用的文件还是会在打包后的文件中,代码如下
/***/ 733:
/*!*********************!*\
!*** ./src/math.js ***!
\*********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
/* unused harmony exports square, cube */
function square(x) {
return x * x;
}
function cube(x) {
return x * x * x;
}
/***/ })
usedExports 是依赖于terser来检测,在声明中的副作用,不如side effects直接
也无法直接跳过整个文件,React的高阶组件存在问题。
// 使用这个表明表示没有副作用,这会允许删掉这行代码,不分析他的side effect
var Button$1 = /*#__PURE__*/ withAppProvider()(Button);
因为文件的import声明不好判断可以在package.json 的 sideEffects 字段加入该文件
If no direct export from a module flagged with no-sideEffects is used,
the bundler can skip evaluating the module for side effects
// 使用这一行代码
import { Button } from "@shopify/polaris"
// 下边是 @shopify/polaris 库里的文件
// index.js
import './configure';
export * from './types';
export * from './components';
// components/index.js
export { default as Breadcrumbs } from './Breadcrumbs';
export { default as Button, buttonFrom, buttonsFrom, } from './Button';
export { default as ButtonGroup } from './ButtonGroup';
// package.json
"sideEffects": [
"**/*.css",
"**/*.scss",
"./esnext/index.js",
"./esnext/configure.js"
],
对于 import { Button } from "@shopify/polaris"
这样代码,有以下4种情况
include it: include the module, evaluate it and continue analysing dependencies
skip over: don't include it, don't evaluate it but continue analysing dependencies
exclude it: don't include it, don't evaluate it and don't analyse dependencies
仔细分析代码经过的模块
index.js: 没使用直接export的代码, 但是用sideEffects标记了 -> include it
configure.js: 没使用直接export的代码, 但是用sideEffects标记了 -> include it
types/index.js: 没使用直接export的代码, 没sideEffects标记 -> exclude it
components/index.js: 没使用直接export的代码, 没sideEffects标记 , but reexported exports are used -> skip over
components/Breadcrumbs.js: 没使用直接export的代码, 没sideEffects标记 -> exclude it.
This also excluded all dependencies like components/Breadcrumbs.css even if they are flagged with sideEffects.
components/Button.js: 使用直接export的代码, 没sideEffects标记-> include it
components/Button.css: 没使用直接export的代码, 但是用sideEffects标记了 -> include it
这样造成,直接引入的文件,只有4个
index.js: pretty much empty
configure.js
components/Button.js
components/Button.css
函数调用变副作用树
通过使用/*#__PURE__*/
注释,可以告诉webpack函数调用是无副作用(纯)的。
它可以放在函数调用的前面,以标记它们为无副作用。传递给函数的参数没有被注释标记,可能需要单独标记。
当未使用变量声明中的初始值被认为是无副作用(pure)时,它将被标记为死代码,不会被执行,并被最小化者删除。
优化时启用此行为。innerGraph
设置为true
。
/*#__PURE__*/ double(55);
减少代码
mode
设置为 production
即可,--optimize-minimize
也可以开启 TerserPlugin
,module-concatenation-plugin
这个插件在tree shaking中使用。
Build Performance
- 保持 webpack、node、npm是最新版本
- 使用 DllPlugin 打包
- 在loader中减少解析范围
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
},
],
},
};
Boot
- 减少文件体积,移除没用的代码,
- 使用缓存 cache配置
Module Federation
- github demo
- 多个独立的build应该构成唯一的应用程序。这些单独的build之间不应该有依赖关系,因此可以单独开发和部署它们。这通常被称为
微前端
,但并不仅限于此 - module两种,本地构建的模块(local module)、运行时容器加载的远程模块(remote module)。
- 加载远程模块,是一个异步的加载chunk的操作,就是使用import、require.ensure或者require([])
- 容器通过容器入口创建,并暴露出获取指定模块的方法,异步加载模块(chunk loading)和异步解析模块(解析期间与其他模块交叉执行)
- 解析顺序,远程解析到本地,或者本地解析到远程,不会收到影响
- 容器可以使用其他容器的模块,容器之间的依赖共享可以实现。
- 容器可以标识模块为可重写,消费者提供重写方法,就是一个可以替换容器中可替换模块的模块
- 当consumer提供一个模块时,容器的所有模块都将使用替换模块而不是本地模块,不提供替换模块,就使用本地模块
- 容器用一种不需在被consumer重写时下载的方式来管理可重写模块,通常是通过将它们放入不同的chunk来实现的。
- 替换模块的provider只提供异步加载方法,它允许容器按需加载替换模块。provider用在容器不需要的时候不加载的方式来管理替换模块,通常是通过将它们放入不同的chunk来实现的
- name 用于标识容器中的可重写模块
- 重写动作和容器暴露模块相似的方式类似,分为两步,异步加载和异步解析。
- 当使用嵌套,给一个容器提供重写将会自动重写嵌套容器中具有相同“名称”的模块。
- 重写必须在加载容器的模块之前提供。在初始块中使用的重写,只能被不使用Promise的同步模块重写。一旦被解析,重写项将不再是可重写的。
- 每个构建都可作为容器,并可以消费别的构建作为容器使用。每个构建都可以通过从其容器中加载其他公开的模块来使用。
- shared module是既可以重写又可以重写嵌套容器的模块。它们通常在每个构建中指向同一个模块,例如同一个库
- packageName选项允许设置一个包名来查找所需的版本。默认情况下,自动推断模块请求,当自动推断应该被禁用时,将requiredVersion设置为false
Building blocks
OverridablesPlugin
此插件让一个模块,可重写ContainerPlugin
此插件使用指定的exposed modules创建一个额外的容器entry,它内部使用OverridablesPlugin,并向容器的consumer公开override APIContainerReferencePlugin
插件add特定的引用到容器作为externals,并允许从这些容器导入远程模块。它还调用这些容器的override API来提供对它们的override。本地重写
(通过__webpack_override__或override API,当build也是一个容器时)和指定重写
将被提供给所有引用的容器ModuleFederationPlugin
此插件组合了ContainerPlugin和ContainerReferencePlugin,Overrides and overridables 会被组合到一个指定的共享模块列表中
Module Federation需要实现的目标
- 应该可以公开和使用webpack支持的任何模块类型
- chunk加载应并行加载所有需要的东西(web:到服务器的单程往返)
- 从consumer到容器的控制,重写模块是单向操作,兄弟容器不能覆盖彼此的模块。
- 应该独立于环境,web, Node.js等都可以用
- 共享的相对和绝对请求(不使用也应该被提供、根据config.context来解析、不默认使用requiredVersion)
- 共享的模块请求(按需提供,将匹配构建中使用的所有equal模块请求,将提供所有匹配模块,
它将从package.json中提取requiredVersion在图中的这个位置,可provide和consume多重不同版本当你有nested node_modules)
- 带有后缀/共享的模块请求将匹配所有带有此前缀的模块请求
使用场景
- 每个页面单独构建
单个spa的每个页面都是在单独的构建中通过容器构建公开的,应用程序外壳是一个引用所有页面的单独构建的远程模块,
这样的话每个页面都可以单独部署,当路由更新或添加新路由时,应用程序外壳就会被部署。
应用程序外壳将常用库定义为共享模块,以避免在页面构建中重复使用它们
- 组件库作为容器
多应用共享一个公共的组件库,可以将其构建为公开每个组件的容器,每个应用消费组件库容器。
对组件库的更改可以单独部署而不需要重新部署所有应用程序。应用程序自动使用组件库的最新版本。
动态远程容器
容器接口支持get和init方法。init是一个异步兼容的方法,调用时只有一个参数:共享范围对象。
此对象在远程容器中用作共享scope,并由host填充provided modules。
它可以在运行时动态的连接 remote containers to a host container
(async () => {
// 初始化shared scope,使用当前build和所有远程的provided modules
await __webpack_init_sharing__('default');
const container = window.someContainer; // or get the container somewhere else
// Initialize the container, it may provide shared modules
await container.init(__webpack_share_scopes__.default);
const module = await container.get('./module');
})();
容器尝试提供共享模块,但如果共享模块已经被使用,则警告和提供的共享模块将被忽略。容器仍然可以使用它作为fallback。
通过这种方式,你可以动态加载一个A/B测试,它提供了一个共享模块的不同版本。
Package exports
一个包的package.json的exports字段,可以定义 import "package" 或者 import "package/sub/path"
的时候,哪些模块被使用。它替换了默认的行为。当定义了这些字段,只有这些字段是有效的,其他的都会
ModuleNotFound 错误。
{
"exports": {
".": "./main.js",
"./sub/path": "./secondary.js",
"./prefix/": "./directory/",
"./prefix/deep/": "./other-directory/",
// 可以定义为一个数组,找到有效的就返回了
"./things/": ["./good-things/", "./bad-things/"]
}
}
// 结果如下
package .../package/main.js
package/sub/path .../package/secondary.js
package/prefix/some/file.js .../package/directory/some/file.js
package/prefix/deep/file.js .../package/other-directory/file.js
package/main.js Error
条件式返回
{
"exports": {
".": {
"red": "./stop.js",
"yellow": "./stop.js",
"green": {
"free": "./drive.js",
"default": "./wait.js"
},
"default": "./drive-carefully.js"
}
}
}
// 上边的这个意思
if (red && valid('./stop.js')) return './stop.js';
if (yellow && valid('./stop.js')) return './stop.js';
if (green) {
if (free && valid('./drive.js')) return './drive.js';
if (valid('./wait.js')) return './wait.js';
}
if (valid('./drive-carefully.js')) return './drive-carefully.js';
throw new ModuleNotFoundError();
剩下的,webpack原链接
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。