Webpack目录中的所有文件？

Question

我正在使用assets plugin生成一个如下所示的JSON文件：

{
  "all": {
    "js": "/assets/all.03c9f6c878ff0040c1a8.js",
    "css": "/assets/all.3286a6b6845c992b2bcc.css"
  },
  "login": {
    "js": "/assets/login.b6b875faa8c0e5869d82.js",
    "css": "/assets/login.6cfad06a1cc88893929b.css"
  }
}

有了这个，我可以将相应的<script>和<link>标记添加到我的HTML中。

现在我想对图像做同样的事情。即，我希望webpack优化目录中的所有图像，为每个图像生成唯一的基于散列的文件名，然后吐出一个显示映射的JSON文件。类似的东西：

{
  "image1.jpg": "/assets/03c9f6c878ff0040c1a8.jpg",
  "image2.gif": "/assets/anotherhash.gif",
  "image3.svg": "/assets/hashyhashyhash.svg",
  "tinyimg.png": "data:image/png;base64,iVBORw0KGgoAAAANSUhE...zlgHe8AAAAASUVORK5CYII="
}

插件可以实现吗？如果是这样，怎么样？

Answer 1

我设法做了很多hackery。

1。添加入口点

entry: {
    icons: 'icons',
},

2。创建索引

创建图标目录。删除所有文件。同时将此index.js添加到目录：

module.exports = require.context('!!file?name=[name]-[sha1:hash:hex:10].[ext]!./', true, /\.(jpe?g|png|gif|svg)($|\?)/i);

这将强制webpack捆绑所有图像。

3。使用此自定义插件创建映射

plugins: [
    {
        apply: function(compiler) {
            //let compilerOpts = this._compiler.options;
            compiler.plugin('done', function(stats, done) {

                let icons = stats.compilation.namedChunks.icons.modules
                    .map(mod => {
                        if(!mod.assets) return [];
                        return Object.keys(mod.assets)
                            .filter(k => mod.assets[k].emitted)
                            .map(k => [path.relative('resources/assets/icons',mod.resource), mod.assets[k].existsAt])
                    })
                    .reduce((a, b) => a.concat(b))
                    .reduce((o, a) => {
                        o[a[0]] = path.relative(publicDir, a[1]).replace(/\\/g,'/');
                        return o;
                    }, {});

                fs.writeFile('icons.json', JSON.stringify(icons,null,2), done);
            });
        }
    },
],

这会吐出一个如下所示的文件：

{
  "1480223500_Tick_Mark_Dark.png": "assets/1480223500_Tick_Mark_Dark-0bca351fd7.png",
  "1480223511_Tick_Mark.png": "assets/1480223511_Tick_Mark-7032400d2f.png",
  "Close_Icon_Dark-128.png": "assets/Close_Icon_Dark-128-e9df07bbd6.png"
}