CODEWITHSUNDEEP
node.jswebpackbabeljs
Explosion Pills
Explosion Pills

Reputation: 191749

Webpack CLI ignores .babelrc

I'm trying to use the wepback cli to do a build of a very simple script ... pretty much:

import 'somelib';
import '../mylib';

I'm running

webpack --output-filename index.js foo.js

But this gives me:

ERROR in ./foo.js
Module parse failed: /dir/foo.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import 'somelib';
| import '../mylib';
|

This indicates to me that webpack is not properly preprocessing the files, but I have a .babelrc in the same directory:

{
  "presets": ["es2015", "stage-0"],
  "plugins": ["transform-runtime", "transform-regenerator",
    "syntax-async-functions", "transform-async-to-generator"]
}

I do have the corresponding babel presets and plugins installed, and in fact babel does work properly on foo.js.

The documentation I found for both Babel and Webpack seem to say that it will use .babelrc automatically and I don't see any cli flag for webpack that would allow you to specify the babel configuration including plugins/presets.

Is there any way I can get the webpack cli to use the plugins and presets I specify in my .babelrc?

Upvotes: 2

Views: 4542

Answers (1)

Leonid Beschastny
Leonid Beschastny

Reputation: 51470

To use babel with webpack you should install and register babel-loader.

babel-loader respects .babelrc file, so it won't require any additional configuration.

So, first you have to install it:

npm i babel-loader -D

Then you should either use an appropriate --module-bind flag in your CLI command:

webpack --module-bind 'js=babel' --output-filename index.js foo.js

or create webpack configuration file for your application (webpack.config.js or webpack.config.babel.js):

module.exports = {
  entry: './foo.js',
  output: {
    filename: 'index.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel'
    }]
  }
}

so there will be no need to specify any command line arguments to build your project:

webpack

Upvotes: 1

Related Questions