How to exclude css files inside "node_modules" with webpack?

Question

In a very simple demo of my javascript project, I use "css-loader" to load css files.

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

Please notice I have already exclude "node_modules" dir.

But when I run npx webpack, the output

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

still contains something about "node_modules".

I can't find where is the problem, how to fix it?

Update:

I make a demo for this question: https://github.com/freewind-demos/javascript-webpack-exclude-node-modules-issue-demo , you can clone and try with it.

Sakhi Mansoor · Accepted Answer · 2018-09-13 08:30:21Z

There is a bit misunderstanding here. Webpack by itself only knows javascript, when it needs to compile other resources like .css, .scss, etc. We use respective loader to compile these non javascript resources.

What actually happens here webpack uses css-loader (node module) to compiles all css files in our tree, starting from entry point. It first convert into string using a util in index.js of 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]

The line above explaining how css loader compiles and bundles css code of your index.css found at in the entry.js. The point here is, these files are not redundant, they are helping webpack in bundling non js files. Although webpack generated output is little bit confusing but still I would recommend to study the source code of css-loader where it gives you understandable concept how it is compiling css to some extent.

brk · Accepted Answer · 2018-09-12 10:25:34Z

0

You may not need path.resolve . Resplce exclude: path.resolve('./node_modules/') with

exclude:/node_modules/ . path.resolve will require __dirname

answered Sep 12, 2018 at 10:25

brk

50.3k10 gold badges59 silver badges85 bronze badges

2 Comments

Freewind Over a year ago

@br Thanks, but exclude: /node_modules/ doesn't work neither. It gives exactly the same output.

Freewind Over a year ago

I also added a demo project, appended in the question

Collectives™ on Stack Overflow

How to exclude css files inside "node_modules" with webpack?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related