ReactJS 파일 로더가 작동하지 않습니다.

Question

파일 로더 모듈이 작동하지 않습니다. 이 코드를 실행하면이 오류가 발생합니다.

"이 파일 유형을 처리하려면 적절한 로더가 필요할 수 있습니다."

나는 이것에 대해 많이 검색해 왔지만 해결책을 찾을 수 없습니다. 어떤 아이디어?

webpack.config.js :

const path = require("path"); 
 
const webpack = require("webpack"); 
 

 
const HtmlWebpackPlugin = require("html-webpack-plugin"); 
 

 
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
 
    template: "./client/index.html", 
 
    filename: "index.html", 
 
    inject: "body" 
 
}) 
 

 
module.exports = { 
 
    entry: "./client/index.js", 
 
    output: { 
 
     path: path.resolve("dist"), 
 
     filename: "index_bundle.js" 
 
    }, 
 
    module: { 
 
     loaders: [ 
 
      { test: /\.js$/, loader: "babel-loader", exclude: /node_modules/ }, 
 
      { 
 
       test: /\.(ico|png|gif|jpg|svg)$/i, 
 
       loader: "file-loader" 
 
      } 
 
     ] 
 
    }, 
 
    plugins: [ 
 
     HtmlWebpackPluginConfig 
 
    ] 
 
}

package.json :

{ 
 
    "name": "hello-world-react", 
 
    "version": "1.0.0", 
 
    "main": "index.js", 
 
    "license": "MIT", 
 
    "scripts": { 
 
    "start": "webpack-dev-server --hot", 
 
    "build": "webpack -p" 
 
    }, 
 
    "dependencies": { 
 
    "html-webpack-plugin": "^2.28.0", 
 
    "path": "^0.12.7", 
 
    "react": "^15.5.4", 
 
    "react-dom": "^15.5.4", 
 
    "webpack": "^2.5.0", 
 
    "webpack-dev-server": "^2.4.5" 
 
    }, 
 
    "devDependencies": { 
 
    "babel-core": "^6.24.1", 
 
    "babel-loader": "^7.0.0", 
 
    "babel-preset-es2015": "^6.24.1", 
 
    "babel-preset-react": "^6.24.1", 
 
    "file-loader": "^0.11.1" 
 
    } 
 
}

App.jsx :

import React from "react"; 
 

 
export default class App extends React.Component { 
 
    render() { 
 
     return (
 
      <div style={{ textAlign: "center" }}> 
 
       <h1>Hello World</h1> 
 
       <img src={require("./client/dog1.jpg")}/> 
 
      </div> 
 
     ) 
 
    } 
 
}

Answer 1

당신은 .jsx 소스 파일을 가지고 있지만 당신은 단지 .js로 끝나는 파일을 babel-loader를 사용하는 웹팩을 말하는 것입니다.

{ test: /\.jsx?$/, loader: "babel-loader", exclude: /node_modules/ },