Webpack 4 as JSX files

What you have here is half of it. resolve.extensions lets you

require('./my-module.jsx')

without having to type in the .jsx portion. ie

require('./my-module')

However, as you noted - the source is not processed in any way so if you have syntax that needs to be transpiled such as jsx, you'll need to take care of that.

Webpack by default won't do this for you, you'll need to use babel-loader with a preset or plugin that will transform the syntax. There's a lot of tutorials how to do that but it would look something like this:

module: {
    rules: [{
        exclude: /node_modules/, // don't transpile node_modules
        test: /\.jsx$/,          // do transpile any files ending in .jsx
        use: {
            loader: 'babel-loader',
            options: {
                plugins: ['@babel/plugin-transform-react-jsx']
            }
        }
    }]
}

you need to install

 npm i @babel/preset-react --save

add this to .babelrc file inside presets array. We use loaders inside module property of the webpack.config object because loaders are effective on one type of files whereas plugins are effective on the entire bundle.

.babelrc

{
  "presets": [
    ["@babel/preset-env", { "targets": { "esmodules": true } }],
    "@babel/preset-react"
  ],

all webpack projects needs @babel/preset-env. you might install that as well. }