Migration Webpack from version 1 to 2

Question

I want to convert webpack 1 configuration file to webpack 2 version. In addition, I want to exclude node modules from bundle. I got following Exception

Using removed Babel 5 option: base.modules - Use the corresponding module transform plugin in the plugins option. Check out http://babeljs.io/docs/plugins/#modules

In addition, I get another error

ERROR in ./index.js Module parse failed: Unexpected token (9:16) You may need an appropriate loader to handle this file type.

The errors seem informative but I can't find what is wrong.

Do I miss something from migration guide?

Version 1

const config = {
    entry: './index.js',
    output: {
        path: '/',
        filename: 'bundle.js',
    },
    devServer: {
        inline: true,
        port: 8080
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};
module.exports = config;

Version 2

const config = {
    entry: './index.js',
    output: {
        path:'/',
        filename: 'bundle.js',
    },
    devServer: {
        inline: true,
        port: 8080
    },
    module: {
        rules:[
            {
                test:/\.jsx?$/,
                use:[
                    {
                        loader:'babel-loader',
                        options:{
                            only:['/node_modules/'],
                            presets:['es2015', 'react']
                        },
                    }
                ]
            }
        ]
    }
};

module.exports = config;

Answer 1

For the first error with Babel, you likely have a dependency that still uses Babel 5 and it contains a config that is no longer allowed in Babel 6. That probably happens because you're trying to transpile your node_modules, as you have removed the exclude option, which has not been changed in webpack 2. Babel always uses the closest config it can find.

For the second error, you are using some syntax that requires Babel, presumably JSX. But you have set the only option on babel-loader, which tells Babel to only transpile files that match the given path. Hence, it's only applied to the node_modules, not the rest of your project. That is exactly the opposite of what you wanted.

Your .jsx rule should be:

{
    test:/\.jsx?$/,
    exclude:/node_modules/,
    use:[
        {
            loader:'babel-loader',
            options:{
                presets:['es2015', 'react']
            },
        }
    ]
}

You are also setting the output.path to /. That is the root of your file system, not the root of your project. To use the directory where the webpack config is, you can use Node's __dirname, which is the absolute path to the directory of the currently executed file (i.e. webpack.config.js).

output: {
    path: __dirname,
    filename: 'bundle.js',
},