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を使用するようにWebPACKのを言っています。

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