Question

在我的javascript项目的非常简单的演示中，我使用“ css-loader”加载CSS文件。

package.json

model.compile(loss=customLoss(model.inputs),...)

webpack.config.js

{
  "devDependencies": {
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "css-loader": "^1.0.0",
    "style-loader": "^0.23.0"
  }
}

请注意，我已经排除了“ node_modules”目录。

但是当我运行const path = require('path') module.exports = { mode: 'development', entry: './entry.js', output: { path: __dirname, filename: 'bundle.js' }, module: { rules: [{ test: /\.css$/, exclude: path.resolve('./node_modules/'), use: [ {loader: 'style-loader'}, {loader: 'css-loader'} ] }] } }时，输出

npx webpack

仍然包含有关“ node_modules”的内容。

我找不到问题所在，如何解决？

更新：

我对此问题进行了演示：https://github.com/freewind-demos/javascript-webpack-exclude-node-modules-issue-demo ，您可以克隆并尝试使用它。

Answer 1

这里有些误解。 Webpack 本身仅在需要编译.css，.scss等其他资源时才知道javascript。我们使用相应的加载器来编译这些非javascript资源。

这实际上发生了什么webpack从入口点开始使用css-loader（节点模块）来编译树中的所有css文件。它首先使用css-loader的index.js中的util转换为字符串：

loaderUtils.stringifyRequest(this, require.resolve("./css-base.js")) // line 153 css-loader/lib/loader.js

[./node_modules/css-loader/index.js!./index.css] ./node_modules/css-loader!./index.css 196 bytes {main} [built]

上面的代码行解释了css loader如何编译和捆绑index.css中的entry.js的css代码。这里的要点是，这些文件不是多余的，它们正在帮助webpack捆绑非js文件。尽管webpack生成的输出有点令人困惑，但是我仍然建议研究css-loader的源代码，它为您提供了可以理解的概念，它在某种程度上是如何编译CSS的。

Answer 2

您可能不需要path.resolve。用

重新替换exclude: path.resolve('./node_modules/')

exclude:/node_modules/。 path.resolve将需要__dirname

如何使用webpack排除“ node_modules”中的CSS文件？

2 个答案: