您可能需要适当的加载程序来处理此文件类型错误，该错误在ReactJS文件中发生

Question

我将配置分为两种生产和开发模式，并使用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'));

。babelrc代码

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

Answer 1

您将需要在两个文件上都调用merge，将common与每种情况下指定的对象合并：

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

Answer 2

发生该错误是因为您的JSX没有被编译为JavaScript。

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

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

[我看到您已经导入了“ webpack-merge”，但似乎并没有使用它（至少在问题中显示的代码中）。因此，似乎您没有合并完全不同的以您期望的方式配置文件（或可能根本没有）。

[而不是将您的配置分成多个文件，通常[从我所见]，开发人员更喜欢使用一个文件，其中包含一个基于环境变量的逻辑：https://webpack.js.org/guides/environment-variables/

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