webpack 生成的 JavaScript 文件如何自动引入到 HTML 页面？

Question

output: {
    path: path.join(__dirname, 'app/js/dest'),
    filename: '[name].[hash].js',
},

webpack 编译后生成的js文件，因为有hash值，每次不一样，怎么自动引入HTML文件呢？

Answer 1

gulp 倒是很方便。webpack 没有这样试过，看看有没有写好的插件

类似于这样, 我这里是读取 css 文件让后给里面的图片加md5

function styleMd5Build(cfg) {
    var files = glob.sync(cfg.build + '/**/*.css');
    files.map(function(file) {
        var buff = fs.readFileSync(file, {
            encoding: 'utf8'
        });
        var reg = /url\(([\s\S]+?)\)/g;
        var result = buff.match(reg);
        if (result !== null) {
            for (var i = 0; i < result.length; i++) {
                var code = result[i];
                var name = code.split('/');
                name = name[name.length - 1];
                name = name.replace(')', '');
                if (name.split('.')[0].match(/homepage-icons/i)) {

                    var imagePath = code.replace('url(', '');
                    imagePath = imagePath.replace(')', '');

                    var rBuff = fs.readFileSync(cfg.deploy + '/' + imagePath);
                    var hash = md5(rBuff);
                    code = code.replace('.png', '.' + hash + '.png');
                    buff = buff.replace(result[i], code);
                }
            }
        }

        fs.writeFileSync(file, buff);
    });
}

Answer 2

用这个吧：html-webpack-plugin