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源文件，但您告诉Webpack仅使用babel-loader来查找以.js结尾的文件。修复Webpack配置中的测试：

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

ReactJS文件加载器无法正常工作

1 个答案: