你可能需要一个合适的加载器来处理 ReactJS 文件中发生的这种文件类型错误

Question

I have divided my configuration in to two production and development mode and merging them using webpack-merge.

Whenever i try to build or run the code it gives me you may need an appropriate loader error even though i have define loader for the jsx or js files.

Common Config File code is here...

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
    entry : "./src/index.js",
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ]
            },
            {
                test: /.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                presets: ['es2015', 'react']
                }
            }
        ]
    },
    plugins: [
        new webpack.ProgressPlugin(),
        new HtmlWebpackPlugin({template: './src/index.html'})
    ]
}

Production Config Code is

const path = require("path");
const common = require("./webpack.config");
const merge = require("webpack-merge");

module.exports = (common, {
    mode : "production",
    output: {
        filename : "bundle.[contentHash].js",
        path : path.resolve(__dirname, "dist")
    }
});

Development Config Code

const path = require("path");
const common = require("./webpack.config.js");
const merge = require("webpack-merge");

module.exports = (common, {
    mode : "development",
    output: {
        filename : "bundle.js",
        path : path.resolve(__dirname, "dist")
    }
});

index.js code

import "./assets/scss/main.scss";
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return <h1>Hello</h1>
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

.babelrc code

{
    "presets": ["env", "react","@babel/preset-env"],
    "plugins": [
        "transform-class-properties"
    ]
}

Answer 1

That error occurs because your JSX is not being compiled to JavaScript.

The test in your config file that handles this is:

test: /.(js|jsx)$/,
loader: 'babel-loader',

I see that you've imported "webpack-merge" but it does not appear that you're using it (at least in the code that is displayed in your question).So it seems like you're not merging the disparate config files in the way you're expecting (or maybe at all).

Instead of splitting your config into multiple files, usually [from what I've seen] developers prefer to use one file with some logic in it based on an environmental variable: https://webpack.js.org/guides/environment-variables/

process.env.NODE_ENV === 'dev' ? doDevStuff : doProdStuff

Answer 2

You will need to call merge on both your files, merging common with the object specified for each case:

// webpack.prod.js

const path = require("path");
const common = require("./webpack.config");
const merge = require("webpack-merge");

module.exports = merge(common, {
    mode : "production",
    output: {
        filename : "bundle.[contentHash].js",
        path : path.resolve(__dirname, "dist")
    }
});

// webpack.dev.js

const path = require("path");
const common = require("./webpack.config.js");
const merge = require("webpack-merge");

module.exports = merge(common, {
    mode : "development",
    output: {
        filename : "bundle.js",
        path : path.resolve(__dirname, "dist")
    }
});