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

Question

Since I upgraded to Webpack 2, I cannot “exclude” in my “rules”. Failed to pass "exclude" to "parameters". What is the right way to do it now?

Before:

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

Now:

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

The whole configuration:

 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") ] } ] } 

More details: https://webpack.js.org/configuration/

Answer 2

This is how we overcome 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 the same as you showed, but have not tried, it works just like this:

 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

You thought about using external ones in webpack.config.js to ignore directories, which in your case are "node_modules"

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