woocommerce/packages/js/dependency-extraction-webpack-plugin/zh-cn

Dependency Extraction Webpack Plugin

扩展 WordPress Dependency Extraction Webpack Plugin，以自动包含 WooCommerce 依赖项以及 WordPress 依赖项。

安装

安装该模块

pnpm install @woocommerce/dependency-extraction-webpack-plugin --save-dev

用法

像使用 Dependency Extraction Webpack Plugin 一样使用此插件。API 完全相同，只是 WooCommerce 包也会被自动处理。

// webpack.config.js
const WooCommerceDependencyExtractionWebpackPlugin = require( '@woocommerce/dependency-extraction-webpack-plugin' );

module.exports = {
 // …snip
 plugins: [ new WooCommerceDependencyExtractionWebpackPlugin() ],
};

注意： 如果你计划使用 WooCommerceDependencyExtractionWebpackPlugin 来扩展 @wordpress/scripts 的 webpack 配置，请确保移除该插件的默认实例：

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const webpackConfig = {
	...defaultConfig,
	plugins: [
		...defaultConfig.plugins.filter(
			( plugin ) =>
				plugin.constructor.name !== 'DependencyExtractionWebpackPlugin'
		),
		new WooCommerceDependencyExtractionWebpackPlugin(),
	],
};

在 WordPress Dependency Extraction Webpack Plugin 基础上额外处理的模块请求如下：

请求	全局	脚本句柄	备注
@woocommerce/data	wc['data']	wc-store-data
@woocommerce/csv-export	wc['csvExport']	wc-csv
@woocommerce/blocks-registry	wc['wcBlocksRegistry']	wc-blocks-registry
@woocommerce/block-data	wc['wcBlocksData']	wc-blocks-data-store	此依赖项没有关联的 npm 包
@woocommerce/settings	wc['wcSettings']	wc-settings
@woocommerce/*	wc['*']	wc-*

选项

可以向构造函数传递一个对象来自定义行为，例如：

module.exports = {
 plugins: [
  new WooCommerceDependencyExtractionWebpackPlugin( {
   bundledPackages: [ '@woocommerce/components' ],
  } ),
 ],
};

bundledPackages

• 类型: 数组
• 默认值: []

一个潜在的 WooCommerce 排除包列表，这会将排除的包包含在捆绑包中（上面的例子）。

要查看更多支持的选项，请参阅原始的 依赖提取插件。