loader exclude not working with resolve config?

[dashed]

I can't seem to get exclude loader option to work. Perhaps I'm not doing it right?

My webpack config is the following:

    resolve: {

        root: __dirname + "/client/",

        modulesDirectories: ["node_modules", "bower_components"],

        alias: {
            jquery: 'jquery/dist/jquery.js'
        }
    },

    module: {
        loaders: [
            // Used for reactjs
            { test: /\.jsx$/, loader: "jsx-loader" }
        ],

        postLoaders: [
            {
                // test: "\\.js$",
                test: /\.js$/, // include .js files
                exclude: ["bower_components", "node_modules"], // exclude more files
                loader: "jshint-loader"
            }
        ]
    },
//...

Output:

Hash: eb15878a99f7ada4bab9
Version: webpack 1.3.1-beta4
Time: 2350ms
 Asset    Size  Chunks             Chunk Names
app.js  257615       0  [emitted]  main
   [0] ./client/app.js 791 {0} [built]
   [1] ./bower_components/jquery/dist/jquery.js 247351 {0} [built] [1 warning]
       cjs require jquery [0] ./client/app.js 10:4-21

WARNING in ./bower_components/jquery/dist/jquery.js
jshint results in errors
...

I'd like to ignore ./bower_components/jquery/dist/jquery.js for jshinting.

[sokra]

see http://webpack.github.io/docs/configuration.html#module-loaders

module.loaders

A array of automatically applied loaders.

Each item can have these properties:

• test: A condition that must be met
• exclude: A condition that must not be met
• include: A condition that must be met
• loader: A string of "!" separated loaders
• loaders: A array of loaders as string

A condition can be a RegExp, an absolute path start, or an array of one of these combined with "and".

---

exclude: [/bower_components/, /node_modules/]

[dashed]

@sokra Thanks! The explicit regex works. I lifted the exclude example from the README.md assuming that it would work as strings.

I thought the string would be converted to regex, but seems to be padded: https://github.com/webpack/core/blob/master/lib/LoadersList.js#L35

---

By the way, what do you mean when a condition can be an 'an array of one of these combined with “and”'.? I can't seem to find this in webpack-core.

[dashed]

Edited webpack docs to clarify loader conditions.

[sokra]

Thanks

[jescalan]

Hey so I know this is a couple years after this issue has been touched, but quick question:

If you pass a regex into exclude, what is it tested against? The absolute path to each file evaluated, or the path relative to the "context"? This would be helpful to add to the docs as well!

[RichardJECooke]

I'm having similar problems with exclude. The current (2016) documentation still has the above definition, but no examples. Can anyone help with this please? http://stackoverflow.com/questions/37054652/why-isnt-webpack-excluding-a-folder-i-specified

[jasonswearingen]

@sokra this is great details, please get it added to that configuration page you mentioned! (nothing is there about include/exclude)

edit: oh, it is there (i went to post a link to this comment) There are a lot of loader pages on the webpack site that don't have this info unfortunately. hard to find!

example: https://webpack.github.io/docs/using-loaders.html

[xgqfrms]

webpack-3

https://github.com/webpack-contrib/closure-webpack-plugin/tree/webpack-3

https://webpack.js.org/plugins/closure-webpack-plugin/#older-versions

is this right?

exclude: ["/bower_components/", "/node_modules/", ".md"],

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const webpack = require("webpack")

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    exclude: ["/bower_components/", "/node_modules/", ".md"],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    },
  plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
  ]
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.s(a|c)ss$/,
        // test: /\.sass$/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}