0

我正在尝试在静态站点生成器 Hugo 生成的 HTML 文件中散列和优化我的图像。

我可以html-loader使用以下测试配置一次处理一个文件：

entry: {
        main: './entry.js'
    },
    module: {
        rules: [
            { test: /\.jpg$/, use: [ "file-loader" ] },
            { test: /\.png$/, use: [ "file-loader" ] },
            { test: /\.html$/, use: ExtractTextPlugin.extract("html-loader") }
        ]
    },
    output: {
        publicPath: "./",
        filename: 'test.bundle.js'
    }

并且entry.js很简单：

require('./test.html');

包含：

<img src="test.png" data-src="test.png" >

这很好用！我得到一个带有散列图像源的 HTML 文件，并且图像本身是散列的。

我真正想做的是能够 glob 一个 HTML 文件目录并获得类似的结果。

我已经尝试过以下方式：

const glob = require('glob');

glob.sync( "./*.html" ).forEach( function( file ) {
  require( path.resolve( file ) );
});

无济于事。

我一直在挖掘和挖掘，我似乎无法找到答案。任何想法表示赞赏！

4

1 回答 1

0

事实证明，您可以将对象作为入口点传递给 Webpack。因此，您所要做的就是 glob 所需的文件，并将其转换为对象并将该对象用作您的条目。

于 2017-07-24T15:09:32.980 回答