npm run build issue <你可能需要一个合适的加载器>

Question

stackoverflow 上的相关问题涉及不同的问题。

我尝试编译 node.js 项目。

我还有 webpack.config.js、app.js 和 package.json。

一个错误说：

./src/components/app.js 中的错误 11:12 模块解析失败：意外令牌 (11:12) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders

|     render() {
|         return (
>             <div className="container">
|                   <input className="btn btn-primary" type="submit" value="Alert" onClick={() => {alert("Alert button onClick");}}/>
|           </div>
 @ ./src/index.js 1:0-26

我的 app.js：

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

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        return (
            <div className="container">
                <input className="btn btn-primary" type="submit" value="Alert" onClick={() => {alert("Alert button onClick");}}/>
            </div>
        )
    }
}

const app = document.getElementById('app');
if(app){
    ReactDOM.render(<App/>, app);
}

我的 webpack.config.js

module.exports = {
    entry: [
        './src/index.js'
    ],
    output: {
        filename: 'build.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    }
};

我的 package.json

{
    "name": "mweb3-demo-waves",
    "version": "0.1.0",
    "scripts": {
        "webpack" : "webpack",
        "dev": "npm run webpack -- --mode development --watch",
        "build": "npm run webpack -- --mode production",
        "watch": "webpack --watch"
    },
    "dependencies": {
        "@babel/preset-env": "^7.1.0",
        "@babel/preset-react": "^7.0.0",
        "babel": "^6.23.0",
        "babel-core": "^6.26.3",
        "react": "^16.5.2",
        "react-dom": "^16.5.2",
        "express": "^4.16.4"
    },
    "devDependencies": {
        "@babel/core": "^7.1.2",
        "@babel/runtime-corejs2": "^7.0.0",
        "babel-loader": "^8.0.4",
        "babel-preset-es2015": "^6.24.1",
        "cross-env": "^5.2.0",
        "webpack": "^4.17.2",
        "webpack-cli": "^3.1.0"
    }
}

UPD。 (2019-01-10): Mike，在进行了最新的更改后，第一个错误又回来了：

./src/components/app.jsx 中的错误 11:12 模块解析失败：意外令牌 (11:12) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders

Answer 1

您的 app.js 文件实际上是 .jsx 语法（简而言之，它返回 HTML），但您将其加载到 babel-loader 中作为普通 .js

将app.js 文件名更改为app.jsx

与

在您的webpack.config.js 中试试这个：

module.exports = {
    entry: [
        './src/index.js'
    ],
    output: {
        filename: 'build.js'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    }
};