Geek Answers Handbook

Webpack Babel - about .babelrc

Hey. It's just interesting if there is any reason for storing the .babelrc file for storing the preset instead of having presets in the webpack.config file (except for the possibility of reusing the babelrc file in another project). I had an application that works correctly using the .babelrc file as follows:

{ "presets": ["es2015", "stage-0","react"] }

Then I moved the application to another webpack structure without a .babelrc file:

 //webpack.config.js module: { loaders: [ { test: /(\.js|\.jsx)$/, exclude: /(node_modules)/, loader: 'babel', query: { presets: ['es2015', 'stage-0', 'react'] } },

Strange, now the application stops working with the problem of parsing jsx and "importing" keywords, etc. inside my server.js file. It only works when adding a babelrc file. Can someone explain why it only works with babelrc file?

+6
source share
2 answers

Change the bootloader to babel-loader in webpack.config.js and before that you need to install them using

 npm install babel-loader babel-core babel-preset-es2015 --save-dev

Also make sure you install babel-preset-react

Team

webpack.config.js

  module: { loaders: [ { test: /\.js?$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { presets: ['react', 'es2015', 'stage-0'], plugins: ['react-html-attrs', 'transform-decorators-legacy'], } } ] },
0
source

In your webpack configuration, instead of passing the query option, you can configure the babel options using the babel keyword:

 babel: { babelrc: false, presets: ['react', 'es2015', 'stage-0'], plugins: ['react-html-attrs', 'transform-decorators-legacy'] }, modules: { loaders: [ ... ] }

This seems to fix the issue for me. Unfortunately, I don’t know exactly why this works: - (

You can see that some of the babel-loader tests use this to configure parameters: https://github.com/babel/babel-loader/blob/master/test/options.test.js#L70

0
source

More articles:


All Articles