@wordpress/custom-templated-path-webpack-plugin

查看官方原文 ↗

💡 云策文档标注

概述

@wordpress/custom-templated-path-webpack-plugin 是一个用于扩展 Webpack 路径模板标签的插件，允许开发者自定义标签行为。该插件已针对 Webpack v5 弃用，建议使用 output.filename 替代，仅兼容 Webpack v4 和 Node.js 12.0.0 及以上版本。

关键要点

插件已弃用：不适用于 Webpack v5，应改用 output.filename。
功能：通过自定义函数扩展 Webpack 的模板标签，在编译过程中替换路径中的标签。
安装：使用 npm install @wordpress/custom-templated-path-webpack-plugin --save-dev 安装，需 Node.js 12.0.0+ 和 Webpack v4。
用法：在 Webpack 配置的 plugins 中实例化 CustomTemplatedPathPlugin，传递对象，键为标签名，值为处理路径和数据的函数。
示例：提供了创建 basename 标签的代码示例，用于在输出文件名中替换入口文件的基本名称。
贡献：该包是 Gutenberg 项目的一部分，采用 monorepo 结构，贡献指南请参考项目主文档。

代码示例

const { basename } = require( 'path' );
const CustomTemplatedPathPlugin = require( '@wordpress/custom-templated-path-webpack-plugin' );

module.exports = {
    entry: './entry',
    output: {
        filename: 'build-[basename].js',
    },
    plugins: [
        new CustomTemplatedPathPlugin( {
            basename( path, data ) {
                let rawRequest;
                const entryModule = get( data, [ 'chunk', 'entryModule' ], {} );
                switch ( entryModule.type ) {
                    case 'javascript/auto':
                        rawRequest = entryModule.rawRequest;
                        break;
                    case 'javascript/esm':
                        rawRequest = entryModule.rootModule.rawRequest;
                        break;
                }
                if ( rawRequest ) {
                    return basename( rawRequest );
                }
                return path;
            },
        } ),
    ],
};

📄 原文内容

DEPRECATED for webpack v5: please use output.filename instead.

Webpack plugin for creating custom path template tags. Extend the default set of template tags with your own custom behavior. Hooks into Webpack’s compilation process to allow you to replace tags with a substitute value.

Installation

Install the module

npm install @wordpress/custom-templated-path-webpack-plugin --save-dev

Note: This package requires Node.js 12.0.0 or later. It is not compatible with older versions. It works only with webpack v4.

Usage

Construct an instance of CustomTemplatedPathPlugin in your Webpack configurations plugins entry, passing an object where keys correspond to the template tag name. The value for each key is a function passed the original intended path and data corresponding to the asset.

The following example creates a new basename tag to substitute the basename of each entry file in the build output file. When compiled, the built file will be output as build-entry.js.

const { basename } = require( 'path' );
const CustomTemplatedPathPlugin = require( '@wordpress/custom-templated-path-webpack-plugin' );

module.exports = {
    // ...

    entry: './entry',

    output: {
        filename: 'build-[basename].js',
    },

    plugins: [
        new CustomTemplatedPathPlugin( {
            basename( path, data ) {
                let rawRequest;

                const entryModule = get( data, [ 'chunk', 'entryModule' ], {} );
                switch ( entryModule.type ) {
                    case 'javascript/auto':
                        rawRequest = entryModule.rawRequest;
                        break;

                    case 'javascript/esm':
                        rawRequest = entryModule.rootModule.rawRequest;
                        break;
                }

                if ( rawRequest ) {
                    return basename( rawRequest );
                }

                return path;
            },
        } ),
    ],
};

For more examples, refer to Webpack’s own TemplatedPathPlugin.js, which implements the base set of template tags.

Contributing to this package

This is an individual package that’s part of the Gutenberg project. The project is organized as a monorepo. It’s made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to npm and used by WordPress as well as other software projects.

To find out more about contributing to this package or Gutenberg as a whole, please read the project’s main contributor guide.

云策 WordPress 开发者社区

块编辑器开发文档