Question

当我使用ignore-loader忽略来自节点模块的导入时，当我还使用webpack-node-externals时，它似乎无效。但是，当我从我自己的仓库中导入文件时，它确实有效。例如：

{
  externals: [
    nodeExternals(),
  ],
  target: node,
  module: {
    rules: [
      { test: /\.css$/, use: "ignore-loader" },
    ],
  },
}

使用此规则，将忽略CSS文件的相对导入，但从节点模块导入CSS文件会导致语法错误。因此，import "./foo.css"不会导致任何问题，但import "react-tippy/dist/tippy.css"会导致语法错误：

/Users/jessepinho/.../node_modules/react-tippy/dist/tippy.css:1
(function (exports, require, module, __filename, __dirname) { .tippy-touch{cursor:pointer!important ...

SyntaxError: Unexpected token .

此问题仅在包含nodeExternals()时出现。似乎webpack-node-externals不仅可以防止捆绑节点模块，还可以让加载器处理它们。

任何想法如何解决这个问题？谢谢！

Answer 1

webpack-node-externals插件将从正常捆绑中过滤掉node_modules并将它们添加到外部。
webpack中的外部工作如in the documentation所述：

防止捆绑某些导入的包，而是检索这些外部依赖在运行时。

这意味着ignore-loader不适用于这些文件。

一个简单的解决方法是将css文件添加到webpack-node-externals的白名单中

externals: [nodeExternals({
    whitelist: [/\.css/]
})],

如何忽略具有ignore-loader + webpack-node-externals的节点模块？

1 个答案: