如何使用 webpack 排除“node_modules”中的 css 文件？答案

【问题标题】：How to exclude css files inside "node_modules" with webpack?如何使用 webpack 排除“node_modules”中的 css 文件？
【发布时间】：2018-09-12 10:20:25
【问题描述】：

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

package.json

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

webpack.config.js

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'}
            ]
        }]
    }
}

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

但是当我运行npx webpack 时，输出

Hash: 3d4b3f13f73f8b4ff12f
Version: webpack 4.17.1
Time: 255ms
Built at: 2018-09-12 18:13:34
    Asset    Size  Chunks             Chunk Names
bundle.js  23 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./entry.js] 78 bytes {main} [built]
[./index.css] 1.04 KiB {main} [built]
[./node_modules/css-loader/index.js!./index.css] ./node_modules/css-loader!./index.css 196 bytes {main} [built]
    + 3 hidden modules

仍然包含一些关于“node_modules”的内容。

我找不到问题出在哪里，如何解决？

更新：

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

【问题讨论】：

标签： javascript css webpack

【解决方案1】：

这里有点误会。 Webpack本身只知道javascript，当它需要编译.css、.scss等其他资源时，我们使用各自的loader来编译这些非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 加载器如何编译和捆绑 index.css 的 css 代码，位于 entry.js 中。这里的重点是，这些文件不是多余的，它们是在帮助 webpack 打包非 js 文件。虽然 webpack 生成的输出有点混乱，但我仍然建议研究 css-loader 的源代码，它在某种程度上为您提供了可以理解的 css 编译概念。

【讨论】：

【解决方案2】：

您可能不需要 path.resolve 。用

回复 exclude: path.resolve('./node_modules/')

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

【讨论】：

@br 谢谢，但exclude: /node_modules/ 也不起作用。它给出完全相同的输出。
我还添加了一个演示项目，附加在问题中