Webpack 1.13.2 执行 shell 命令解决 打印时没有背景色和文字颜色的问题

这是因为 Webpack 1.13.2 不支持新的插件钩子 API。Webpack 1 的插件系统使用的是 plugin 方法，而不是 Webpack 4+ 中的 hooks。

在 Webpack 1 中，你可以使用以下代码来确保 sed 命令在打包完成后执行：

const { exec } = require('child_process');

module.exports = {
  // 你的其他 Webpack 配置
  plugins: [
        function() {
      this.plugin('compile', function() {
        // `grep -F '@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}' node_modules/bootstrap/dist/css/bootstrap.min.css`
        // `sed -i 's|@media print{\\*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}|@media print{|g' node_modules/bootstrap/dist/css/bootstrap.min.css`,
        exec(
          `grep -F '@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}' node_modules/bootstrap/dist/css/bootstrap.min.css`,
          (error, stdout, stderr) => {
            if (error) {
              // 如果处理过的 (code: 1), 就不再继续执行, 也不用打印错误信息
              if (error.code !== 1) {
                console.error(`执行 grep 命令时出错: ${error.message}`);
              }
              return;
            }
            if (stderr) {
              console.error(`grep 命令输出错误: ${stderr}`);
              return;
            }
            console.log(`grep 命令执行完成`);

            exec(
              `sed -i 's|@media print{\\*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}|@media print{|g' node_modules/bootstrap/dist/css/bootstrap.min.css`,
              (error, stdout, stderr) => {
                if (error) {
                  console.error(`执行 sed 命令时出错: ${error.message}`);
                  return;
                }
                if (stderr) {
                  console.error(`sed 命令输出错误: ${stderr}`);
                  return;
                }
                console.log(`sed 命令执行完成`);
              },
            );
          },
        );
      });
    },
  ],
};

说明

• 先通过 grep 所有是否需要修改, 如果不需要修改就不改了, 否则在 --watch 模式下会死循环的 build
• this.plugin('compile', callback)：compile 事件在 Webpack 编译开始之前触发，因此 sed 命令会在打包之前执行。
• exec 命令直接在 compile 钩子中执行 sed，确保替换操作在打包完成后运行。

以上的 plugin 解决了引用 bootstrap 的 css 后, 打印时没有背景色和文字颜色的问题.

原文地址：https://blog.csdn.net/galoiszhou/article/details/143731008

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！