访问复制webpack插件时散列的静态资源的实际名称/路径/URL,可以通过以下步骤实现:
CopyWebpackPlugin
插件将静态资源复制到输出目录。确保在webpack配置文件中引入该插件。output
选项,指定输出目录和公共路径。例如:output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: '[name].[contenthash].js',
},
其中,[contenthash]
会生成一个唯一的哈希值,用于标识静态资源的版本。
__webpack_public_path__
获取公共路径。例如:const assetPath = `${__webpack_public_path__}assets/myAsset.jpg`;
这样可以获取到静态资源的实际路径。
url-loader
或file-loader
等webpack的加载器。这些加载器可以将静态资源转换为URL,并返回给前端代码使用。例如:import myAssetUrl from './assets/myAsset.jpg';
在上述代码中,myAssetUrl
将包含静态资源的URL。
总结起来,访问复制webpack插件时散列的静态资源的实际名称/路径/URL的步骤如下:
CopyWebpackPlugin
插件将静态资源复制到输出目录。output
选项,指定输出目录和公共路径。__webpack_public_path__
获取公共路径。url-loader
或file-loader
等加载器将静态资源转换为URL,并在前端代码中使用。领取专属 10元无门槛券
手把手带您无忧上云