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: , you can clone and try with it.

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./freewind-demos/javascript-webpack-exclude-node-modules-issue-demo , you can clone and try with it.

• javascript
• css
• webpack

2 Answers 2

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

What actually happens here webpack uses css-loader (node module) to piles 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 piles 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 remend to study the source code of css-loader where it gives you understandable concept how it is piling css to some extent.

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

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