您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件

Question

我正在尝试将 webpack 与我的 react 项目集成，但收到以下错误消息。

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

我试图在这里找到一些答案，但无济于事。看起来问题出在我尝试渲染整个应用程序的 index.js 页面

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

这是我的 package.json 文件：

{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.4.2",
"@material-ui/icons": "^4.4.1",
"axios": "^0.19.0",
"babel-core": "^6.26.3",
"material-ui": "^0.20.2",
"react": "^16.10.2",
"react-activity": "^1.2.2",
"react-dom": "^16.10.2",
"react-dropzone": "^10.1.10",
"react-redux": "^7.1.1",
"react-responsive-carousel": "^3.1.51",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-router-flux": "^1.0.0",
"react-scripts": "3.1.1",
"react-tap-event-plugin": "^3.0.3",
"redux": "^4.0.4",
"redux-persist": "^6.0.0",
"redux-promise": "^0.6.0",
"redux-thunk": "^2.3.0",
"serve": "^11.2.0",
"superagent": "^5.1.0"
},
"scripts": {
"start": "PORT=8080 react-scripts start",
"build": "webpack --env.API_URL=https://neighbor-hood.herokuapp.com --config 
webpack.config.build.js",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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": {
"webpack": "^4.39.1",
"webpack-cli": "^3.3.10"
}
}

这是我的 webpack.config.build.js 文件：

const webpack = require('webpack'); 
module.exports = (env) => {
const envKeys = Object.keys(env).reduce((prev, next) => {
prev[`process.env.${next}`] = JSON.stringify(env[next]);
return prev;
}, {});

module:{
    rules:[{
        loader: 'babel-loader',
        test: /\.js$|jsx/,
        exclude: /node_modules/
    }]
}


return {
plugins: [
  new webpack.DefinePlugin(envKeys)
]
};
};

如有必要，任何我的 .babelrc 文件：

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

这是我的 index.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';

import Main from './Main';
import * as serviceWorker from './serviceWorker';


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

现在不知道这意味着什么......（可能已经回答了）

Answer 1

您的直接问题就在这里。在--config 之后有一个回车或换行。

"build": "webpack --env.API_URL=https://neighbor-hood.herokuapp.com --config 
webpack.config.build.js",

试试这个。

"build": "webpack --env.API_URL=https://neighbor-hood.herokuapp.com --config webpack.config.build.js",