Как исключить CSS-файлы внутри "node_modules" с помощью веб-пакета?

Question

В очень простой демонстрации моего проекта 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 , вы можете клонировать и попробовать с ним.

Answer 1

Здесь есть небольшое недоразумение. Webpack сам по себе знает только javascript, когда ему нужно скомпилировать другие ресурсы, такие как .css, .scss и т. Д. Мы используем соответствующий загрузчик для компиляции этих не javascript-ресурсов.

Что в действительности происходит здесь, веб-пакет использует css-loader (модуль узла) для компиляции всех файлов CSS в нашем дереве, начиная с точки входа. Сначала он конвертируется в строку с помощью утилиты в index.js из css-loader:

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 компилирует и связывает код css вашего index.css, найденного в entry.js. Дело в том, что эти файлы не являются избыточными, они помогают веб-пакетам связывать файлы не js. Хотя вывод, сгенерированный вебпаком, немного сбивает с толку, но все же я бы рекомендовал изучить исходный код css-loader, где он дает понятное представление о том, как он в некоторой степени компилирует CSS.

Answer 2

Возможно, вам не нужно path.resolve. Resplce exclude: path.resolve('./node_modules/') с

exclude:/node_modules/. path.resolve потребуется __dirname