Javascript 您可能需要一个合适的加载程序来处理ReactJS文件中发生的此文件类型错误

我已将配置分为两种生产和开发模式，并使用webpack merge将它们合并

每当我尝试构建或运行代码时，它会给我一个适当的加载器错误，即使我已经为jsx或js文件定义了加载器

公共配置文件代码在这里

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'})
    ]
}

生产配置代码为

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")
    }
});

开发配置代码

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代码

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'));

---

发生此错误的原因是您的JSX未编译为JavaScript

配置文件中处理此问题的测试是：

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

我看到您已经导入了“webpack merge”，但似乎没有使用它（至少在问题中显示的代码中是这样）。因此，您似乎没有按照预期的方式合并不同的配置文件（或者根本没有）

与将配置拆分为多个文件不同，[据我所见]开发人员通常更喜欢使用一个文件，其中包含基于环境变量的逻辑：

---

您需要对两个文件调用

merge

，将

common

与为每种情况指定的对象合并：

//webpack.prod.js
常量路径=要求（“路径”）；
const common=require（“./webpack.config”）；
const merge=require（“网页包合并”）；
module.exports=合并（公共{
模式：“生产”，
输出：{
文件名：“bundle.[contentHash].js”，
path:path.resolve（uu dirname，“dist”）
}
});

//webpack.dev.js
常量路径=要求（“路径”）；
const common=require（“./webpack.config.js”）；
const merge=require（“网页包合并”）；
module.exports=合并（公共{
模式：“发展”，
输出：{
文件名：“bundle.js”，
path:path.resolve（uu dirname，“dist”）
}
});

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

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