这是因为 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() {
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 && 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 命令执行结果: ${stdout}`);
}
);
});
},
],
};
说明
- 先通过
grep
所有是否需要修改, 如果不需要修改就不改了, 否则在--watch
模式下会死循环的build
this.plugin('compile', callback)
:compile
事件在 Webpack 编译开始之前触发,因此sed
命令会在打包之前执行。exec
命令直接在compile
钩子中执行sed
,确保替换操作在打包完成后运行。
以上的 plugin 解决了引用 bootstrap
的 css 后, 打印时没有背景色和文字颜色的问题.