Since I upgraded to Webpack 2, I cannot have an "exclude" in my "rules". Couldn't pass "exclude" into "options" either. What's the right way of doing it now?

Before:

{
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: /node_modules/,
}

Now:

{
  test: /\.js$/,
  use: [{ loader: 'babel-loader' }]
  ???
}

The whole config:

const path = require('path');
    //const autoprefixer = require('autoprefixer');
    const postcssImport = require('postcss-import');
    const merge = require('webpack-merge');
    const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');

    const development = require('./dev.config.js');
    const demo = require('./demo.config.js');
    const test = require('./test.config.js');
    const staging = require('./staging.config.js');
    const production = require('./prod.config.js');

    const TARGET = process.env.npm_lifecycle_event;

    const PATHS = {
      app: path.join(__dirname, '../src'),
      build: path.join(__dirname, '../dist'),
    };

    process.env.BABEL_ENV = TARGET;

    const mon = {
      entry: [
        PATHS.app,
      ],

      output: {
        path: PATHS.build,
        filename: 'bundle.js',
        chunkFilename: '[name]-[hash].js',
      },

      resolve: {
        alias: {
          config: path.join(PATHS.app + '/config', process.env.NODE_ENV || 'development'),
          soundmanager2: 'soundmanager2/script/soundmanager2-nodebug-jsmin.js',
        },
        extensions: ['.jsx', '.js', '.json', '.scss'],
        modules: ['node_modules', PATHS.app],
      },

      module: {
        rules: [{
          test: /bootstrap-sass\/assets\/javascripts\//,
          use: [{ loader: 'imports-loader', options: { jQuery: 'jquery' } }]
        }, {
          test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
          use: [{ loader: 'url-loader', options: { limit: '10000', mimetype: 'application/font-woff' } }]
        }, {
          test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
          use: [{ loader: 'url-loader', options: { limit: '10000', mimetype: 'application/font-woff' } }]
        }, {
          test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
          use: [{ loader: 'url-loader', options: { limit: '10000', mimetype: 'application/octet-stream' } }]
        }, {
          test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
          use: [{ loader: 'url-loader', options: { limit: '10000', mimetype: 'application/font-otf' } }]
        }, {
          test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
          use: [{ loader: 'file-loader' }]
        }, {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          use: [{ loader: 'url-loader', options: { limit: '10000', mimetype: 'image/svg+xml' } }]
        }, {
          test: /\.js$/,
          //loader: 'babel-loader',
          //exclude: /node_modules/,
          //use: [{ loader: 'babel-loader', options: { exclude: '/node_modules/' } }]
          use: [{ loader: 'babel-loader' }]
          //use: [{ loader: 'babel-loader', options: { cacheDirectory: true } }]
        }, {
          test: /\.png$/,
          use: [{ loader: 'file-loader', options: { name: '[name].[ext]' } }]
        }, {
          test: /\.jpg$/,
          use: [{ loader: 'file-loader', options: { name: '[name].[ext]' } }]
        }, {
          test: /\.gif$/,
          use: [{ loader: 'file-loader', options: { name: '[name].[ext]' } }]
        }],
      },
    };

    if (TARGET === 'start' || !TARGET) {
      module.exports = merge(development, mon);
    }

    if (TARGET === 'build' || !TARGET) {
      module.exports = merge(production, mon);
    }

    if (TARGET === 'lint' || !TARGET) {
      module.exports = merge(production, mon);
    }

Since I upgraded to Webpack 2, I cannot have an "exclude" in my "rules". Couldn't pass "exclude" into "options" either. What's the right way of doing it now?

Before:

{
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: /node_modules/,
}

Now:

{
  test: /\.js$/,
  use: [{ loader: 'babel-loader' }]
  ???
}

The whole config:

const path = require('path');
    //const autoprefixer = require('autoprefixer');
    const postcssImport = require('postcss-import');
    const merge = require('webpack-merge');
    const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');

    const development = require('./dev.config.js');
    const demo = require('./demo.config.js');
    const test = require('./test.config.js');
    const staging = require('./staging.config.js');
    const production = require('./prod.config.js');

    const TARGET = process.env.npm_lifecycle_event;

    const PATHS = {
      app: path.join(__dirname, '../src'),
      build: path.join(__dirname, '../dist'),
    };

    process.env.BABEL_ENV = TARGET;

    const mon = {
      entry: [
        PATHS.app,
      ],

      output: {
        path: PATHS.build,
        filename: 'bundle.js',
        chunkFilename: '[name]-[hash].js',
      },

      resolve: {
        alias: {
          config: path.join(PATHS.app + '/config', process.env.NODE_ENV || 'development'),
          soundmanager2: 'soundmanager2/script/soundmanager2-nodebug-jsmin.js',
        },
        extensions: ['.jsx', '.js', '.json', '.scss'],
        modules: ['node_modules', PATHS.app],
      },

      module: {
        rules: [{
          test: /bootstrap-sass\/assets\/javascripts\//,
          use: [{ loader: 'imports-loader', options: { jQuery: 'jquery' } }]
        }, {
          test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
          use: [{ loader: 'url-loader', options: { limit: '10000', mimetype: 'application/font-woff' } }]
        }, {
          test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
          use: [{ loader: 'url-loader', options: { limit: '10000', mimetype: 'application/font-woff' } }]
        }, {
          test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
          use: [{ loader: 'url-loader', options: { limit: '10000', mimetype: 'application/octet-stream' } }]
        }, {
          test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
          use: [{ loader: 'url-loader', options: { limit: '10000', mimetype: 'application/font-otf' } }]
        }, {
          test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
          use: [{ loader: 'file-loader' }]
        }, {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          use: [{ loader: 'url-loader', options: { limit: '10000', mimetype: 'image/svg+xml' } }]
        }, {
          test: /\.js$/,
          //loader: 'babel-loader',
          //exclude: /node_modules/,
          //use: [{ loader: 'babel-loader', options: { exclude: '/node_modules/' } }]
          use: [{ loader: 'babel-loader' }]
          //use: [{ loader: 'babel-loader', options: { cacheDirectory: true } }]
        }, {
          test: /\.png$/,
          use: [{ loader: 'file-loader', options: { name: '[name].[ext]' } }]
        }, {
          test: /\.jpg$/,
          use: [{ loader: 'file-loader', options: { name: '[name].[ext]' } }]
        }, {
          test: /\.gif$/,
          use: [{ loader: 'file-loader', options: { name: '[name].[ext]' } }]
        }],
      },
    };

    if (TARGET === 'start' || !TARGET) {
      module.exports = merge(development, mon);
    }

    if (TARGET === 'build' || !TARGET) {
      module.exports = merge(production, mon);
    }

    if (TARGET === 'lint' || !TARGET) {
      module.exports = merge(production, mon);
    }

• javascript
• babeljs
• webpack-2

• 1 The exclude property has not changed in webpack 2. Your problem is probably somewhere else in the config. But to be able to help you, you need to provide your config. – Michael Jungo Commented Mar 7, 2017 at 8:45
• 1 @MichaelJungo tried it again and now all of a sudden it piles with no error, whereas before it plained specifically about an unsupported token in a rules clause. go figure... – Dmitry Shvedov Commented Mar 7, 2017 at 15:13

4 Answers 4

Just use

module: {
    rules: [
        {
             test: /\.jsx?$/,
             include: [
                path.resolve(__dirname, "app")
              ],
             exclude: [
                path.resolve(__dirname, "app/demo-files")
             ]
        }
    ]
}

For more ref: https://webpack.js/configuration/

This is how we got past the same problem

{
  test: /\.js$/,        
  use: [{
    loader: 'babel-loader',
    options: {
      ignore: '/node_modules/'        
    }
  }]
}

from https://babeljs.io/docs/usage/api/

The exclude property in webpack 2 is still same as you showed but not tried, it works like that only

module: {
        loaders: [
        {
            test: /\.jsx?/,
            loader: 'babel-loader',
            exclude: [/node_modules/]
        },
    {
        test: /\.(jpg|png|gif|eot|woff2|woff|ttf|ico|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader'
    },
    {
        test: /\.(js)$/,
        loader: `babel-loader`,
        exclude: [/node_modules/]
    }]
}

Have you thought about using externals in webpack.config.js to ignore directories, which in your case is the "node_modules"

https://webpack.js/guides/author-libraries/#external-limitations