Webpack 2 - babel-loader - how to exclude node_modules?

Question

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 common = {
      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, common);
    }

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

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

Answer 1

Just use

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

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

Answer 2

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/

Answer 3

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

Answer 4

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

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