使用 Laravel Mix 在已编译的 HTML 文件中查找和替换

Question

我正在使用 laravel-mix-criticalcss 扩展生成一个 HTML 文件。编译该文件后，我需要运行在 HTML 文件源代码中查找并替换以将 URL 从相对重写为绝对。我尝试使用 laravel-mix-string-replace，它使用 string-replace-loader,，但替换从未发生。我一定是遗漏了 webpack 的工作方式。我错过了什么？

const mix = require('laravel-mix');
const glob = require("glob");

require('laravel-mix-criticalcss');
require('laravel-mix-string-replace');

mix.setPublicPath('assets')
    .disableNotifications()
    .options({
        processCssUrls: false
    });

mix.criticalCss({
    enabled: true,
    paths: {
        base: 'http://lpb-cms.devel',
        templates: 'assets/css/',
        suffix: ''
    },
    urls: [
        {url: '/lpb-branding/get-header/', template: 'header-footer'},
    ],
    options: {
        minify: false,
        height: 19200,
        dest: 'header-footer.html',
        inline: true
    },
}).stringReplace({
    test: /\.html$/,
    loader: 'string-replace-loader',
    options: {
        search: '/themes/',
        replace: 'https://lpb-cms-dev.purecobalt.com/themes/',
    }
});

Answer 1

laravel-mix-string-replace 软件包似乎不起作用。

您可以像这样使用 mix.after() 方法：

const fs = require('fs');
const path = require('path');

mix.setPublicPath('assets')
    .disableNotifications()
    .options({
        processCssUrls: false
    });

mix.criticalCss({
    enabled: true,
    paths: {
        base: 'http://lpb-cms.devel',
        templates: 'assets/css/',
        suffix: ''
    },
    urls: [
        {url: '/lpb-branding/get-header/', template: 'header-footer'},
    ],
    options: {
        minify: false,
        height: 19200,
        dest: 'header-footer.html',
        inline: true
    },
}).after(stats => {
    // webpack compilation has completed
    fs.readFile(path.resolve(__dirname, 'header-footer.html'), 'utf8' , (readError, data) => {
        if (readError) {
            console.error("\x1b[31mError: \x1b[0m" + readError);
            return;
        }

        var result = data.replace('/themes/', 'https://lpb-cms-dev.purecobalt.com/themes/');

        fs.writeFile(path.resolve(__dirname, 'header-footer.html'), result, writeError => {
            if (writeError) {
                console.error("\x1b[31mError: \x1b[0m" + writeError);
                return;
            }

            console.log("Relative theme directory references replaced to full urls!");
        });
    })
})

如果您需要更换不止一件东西，您可以链接更换：

var result = data.replace('foo', 'bar').replace('this', 'that');

使用 Laravel Mix 在已编译的 HTML 文件中查找和替换

Find & replace inside a compiled HTML file using Laravel Mix

webpack

webpack-4

laravel-mix