webpack appears not to call babel-loader

Question

My webpack config stopped working for me. In particular, it looks like babel-loader is no longer getting called, but I have not been able to confirm it.

Here is my console output:

$ NODE_ENV=prod webpack --config=./webpack.prod.js
alc-webcomponent:webpack { output: 
alc-webcomponent:webpack    { filename: 'bundle.js',
alc-webcomponent:webpack      path: '/home/lsiden/proj/alc/alc-webcomponent/dist',
alc-webcomponent:webpack      publicPath: 'dist' },
alc-webcomponent:webpack   resolve: { extensions: [ '.js', '.jsx', 'json' ] },
alc-webcomponent:webpack   module: 
alc-webcomponent:webpack    { loaders: 
alc-webcomponent:webpack       [ { test: /\.js[x]?$/,
alc-webcomponent:webpack           loader: 'debug!babel-loader',
alc-webcomponent:webpack           exclude: /node_modules/ },
alc-webcomponent:webpack         { test: /\.css$/, loader: 'style-loader!css-loader' } ],
alc-webcomponent:webpack      rules: 
alc-webcomponent:webpack       [ { test: /\.scss$/,
alc-webcomponent:webpack           use: 
alc-webcomponent:webpack            [ { loader: '/home/lsiden/proj/alc/alc-webcomponent/node_modules/extract-text-webpack-plugin/dist/loader.js',
alc-webcomponent:webpack                options: [Object] },
alc-webcomponent:webpack              { loader: 'style-loader' },
alc-webcomponent:webpack              { loader: 'css-loader' },
alc-webcomponent:webpack              { loader: 'sass-loader' } ] } ] },
alc-webcomponent:webpack   plugins: 
alc-webcomponent:webpack    [ LoaderOptionsPlugin { options: { debug: true, test: { test: [Function: test] } } },
alc-webcomponent:webpack      UglifyJsPlugin { options: { test: /\.js[x]?$/ } },
alc-webcomponent:webpack      ExtractTextPlugin {
alc-webcomponent:webpack        filename: '[name].[contenthash].css',
alc-webcomponent:webpack        id: 1,
alc-webcomponent:webpack        options: { disable: false } } ],
alc-webcomponent:webpack   entry: { app: [ './src/index.jsx' ] },
alc-webcomponent:webpack   devtool: 'source-map' } +0ms
Hash: 3874eb58e30512d79743
Version: webpack 3.5.5
Time: 104ms
Asset       Size  Chunks             Chunk Names
bundle.js  804 bytes       0  [emitted]  app
[0] multi ./src/index.jsx 28 bytes {0} [built]
[1] ./src/index.jsx 290 bytes {0} [built] [failed] [1 error]

ERROR in ./src/index.jsx
Module parse failed: /home/lsiden/proj/alc/alc-webcomponent/src/index.jsx Unexpected token (41:3)
You may need an appropriate loader to handle this file type.
|   render() {
|       return (
|           <Provider store={this.store}>
|               <Alc />
|           </Provider>
@ multi ./src/index.jsx
error Command failed with exit code 2.

I can see babel-loader about 10 lines down.

Does anyone have an idea how I can debug this? I tried adding the webpack.LoaderOptionsPlugin() and added the "debug" loader to the loader chain, but neither creates any output.

Answer 1

Turned out it was because of

const config = {
    ...
    rules: [],
    ...
}

There must be some default rules that the empty array was overriding.