webpack-pathed-assets-manifest-plugin

v2.0及以上版本仅支持webpack@4。如果你在使用webpack@3，请使用 1.x 版本代替：npm install webpack-pathed-assets-manifest-plugin@1

创建资源清单文件，使用他们的路径当作 key，以方便 server-render 项目映射资源文件路径到打包后的文件。

注：该插件无法替代 webpack-manifest-plugin。它仅仅处理入口文件中 require 的资源文件，例如图片等。

解决的问题

如下文件结构，模块 A 和 B 下的出现了名称同为 logo.png 的不同图片文件：

    app/
    |- /A
      |- index.js
      |- logo.png
      |- title.png
    |- /B
      |- index.js
      |- logo.png

我们使用 webpack-manifest-plugin 这种插件，生成的清单文件，会类似：

1{
2    "logo.png": "logo.d5ae6b8d.png",
3    "title.png": "title.531a2154.png"
4}

很明显可以看出，少了个 logo.png 文件的记录。也就是说，不同模块下的同名文件，在清单文件中会相互覆盖，导致生成的清单文件有丢失文件记录。

而通过本插件，可以生成：

1{
2    "app/A/logo.png": "logo.d5ae6b8d.png",
3    "app/A/title.png": "title.531a2154.png",
4    "app/B/logo.png": "logo.423a075.png"
5}

完美保留了所有的文件索引。

安装

1npm install --save-dev webpack-pathed-assets-manifest-plugin

使用

1var PathedManifestPlugin = require('webpack-pathed-assets-manifest-plugin');
2
3module.exports = {
4    // ...
5    plugins: [
6        new PathedManifestPlugin({
7            filename: 'pathed.manifest.json',
8            map: null, // 可以传function，自定义filename和pathname，默认pathname为相对项目根目录的相对路径
9            filter: null, // 可以传function，自定义过滤的文件
10            assetFilename: '[name].[hash].[ext]' // 静态文件的命名模版，默认为文件后缀前是hash值，如果你的文件命名规则不是这样，可以修改该模板。例如：asset-[name].[hash:8].[ext]
11        })
12    ]
13};