使用 Webpack-merge 的 Webpack“您可能需要适当的加载器”错误

Question

我看到这个问题问了很多，但没有解决方案可以解决这个问题。我在我的 react 项目中使用 webpack，通过 webpack 合并使用 dev+common webpack js 文件。

两个脚本（开发和构建）都给我the same error，“你可能需要一个合适的加载器”。这让我相信问题出在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，由其他 webpack 配置加载

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，由脚本直接加载

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，以防万一

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

非常感谢任何帮助

Answer 1

最终我的解决方案是停止制作自定义 webpack 配置并使用默认的开箱即用 react 构建脚本。哦，好吧！