Webpack目录中的所有文件？答案

【问题标题】：Webpack all files in directory?Webpack目录中的所有文件？
【发布时间】：2016-12-11 22:41:56
【问题描述】：

我正在使用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"
  }
}

有了这个，我可以在我的 HTML 中添加适当的 <script> 和 <link> 标签。

现在我想对图像做同样的事情。即，我希望 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="
}

这可以通过插件实现吗？如果有，怎么做？

【问题讨论】：

标签： webpack

【解决方案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"
}

【讨论】：