Webpack 使用 Webpack-merge 时出现“您可能需要合适的加载程序”错误

Question

I've seen this question asked a lot, and no solution has fixed this. I'm using webpack in my react project, with webpack merge to use a dev+common webpack js file.

Both scripts (dev and build) give me the same error , "you may need an appropriate loader". This has led me to believe the issue is in webpack.common.js .

package.json

{
  "name": "erics-miniatures",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "history": "^5.0.0",
    "jshint": "^2.12.0",
    "list-react-files": "^0.2.0",
    "markdown-to-jsx": "^6.11.4",
    "node-sass": "^4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-responsive-carousel": "^3.2.10",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.4",
    "react-swipeable-views": "^0.13.9",
    "webpack-merge": "^5.2.0"
  },
  "scripts": {
    "dev": "webpack serve --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "babel-loader": "^8.1.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^4.5.0",
    "sass": "^1.27.0",
    "sass-loader": "^10.0.4",
    "url-loader": "^4.1.0",
    "webpack-cli": "^4.1.0"
  }
}

webpack.common.js , loaded by the other webpack configs

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
require('webpack');

module.exports = (env, options) => {
    return {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js',
        },
        module: {
            rules: [
                {
                    test: /\.jsx$|\.es6$|\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/react'],
                        }
                    },
                },
                {
                    test: /\.s[ac]ss$/i,
                    exclude: /node_modules/,
                    use: [
                        // Creates `style` nodes from JS strings
                        'style-loader',
                        // Translates CSS into CommonJS
                        'css-loader',
                        // Compiles Sass to CSS
                        'sass-loader',
                    ],
                },
                {
                    test: /\.(png|jpg|gif)$/,
                    exclude: /node_modules/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]',
                                outputPath: 'images/'
                            }
                        }
                    ]
                },
            ],
        },

        plugins: [
            new MiniCssExtractPlugin({
                filename: 'style.css',
                chunkFilename: '[id].css'
            })
        ],

    }
}

webpack.dev.js , loaded directly by the script

const path = require('path');
const { merge } = require('webpack-merge');
const common = require('./webpack.common');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
    mode: 'development', 
    devtool: 'inline-source-map',
    plugins: [
        new CleanWebpackPlugin(),
        new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
         new HtmlWebpackPlugin({
           title: 'Development',
         }),
       ],
    devServer:{
        contentBase: path.join(__dirname, 'public'), 
        historyApiFallback: true
    }
})

webpack.prod.js , in case it's relevant

const { merge } = require('webpack-merge');
const { common } = require('./webpack.common');

module.exports = merge(common, {
    mode: 'production', 
    devtool: 'source-map',
})

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import { BrowserRouter } from 'react-router-dom'

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

I greatly appreciate any help

Answer 1

Ultimately my solution was to stop making custom webpack configs and use the default out-of-the-box react build script. Oh well!