将 webpack 4 用于反应项目时模块解析失败答案

【问题标题】：Module parsing failed while using webpack 4 for a react project将 webpack 4 用于反应项目时模块解析失败
【发布时间】：2019-04-30 12:02:06
【问题描述】：

我在使用 Webpack 4 配置我的 react 项目时遇到问题。

我在这里打印我的文件内容：

package.json（脚本部分）：

    {
  "name": "todo",
  "version": "1.0.0",
  "description": "a ToDo app built using react and webpack",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development ./src/index.js --output ./dist/main.js",
    "build": "webpack --mode production ./src/index.js --output ./dist/main.js"
  },
  "author": "themaskedbit",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "webpack": "^4.26.1",
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "react": "^16.6.3",
    "react-dom": "^16.6.3"
  }
}

babelrc:

{
    "presets": [
        "@babel/preset-env", "@babel/preset-react"
    ]
}

webpack.config.js：

module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        }
      ]
    }
  };

index.js：

import data from "./data/items";

import React from 'react';
import {render} from 'react-dom';

import ListItem from "./components/listItem";

render(
    <ListItem items={data}/>,
    document.getElementById("app")
);

通过上述配置，当我尝试使用开发脚本运行 webpack 时。我收到以下错误：

$ npm run dev

> todo@1.0.0 dev C:\Users\rejir\Documents\HP works\ToDo
> webpack --mode development ./src/index.js --output ./dist/main.js

Hash: 0fac7774f9aa4bb8aeed
Version: webpack 4.26.1
Time: 234ms
Built at: 2018-11-28 19:50:35
  Asset      Size  Chunks             Chunk Names
main.js  4.01 KiB    main  [emitted]  main
Entrypoint main = main.js
[./src/index.js] 227 bytes {main} [built] [failed] [1 error]

ERROR in ./src/index.js 9:4
Module parse failed: Unexpected token (9:4)
You may need an appropriate loader to handle this file type.
|
| render(
>     <ListItem items={data}/>,
|     document.getElementById("app")
| );
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! todo@1.0.0 dev: `webpack --mode development ./src/index.js --output ./dist/main.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the todo@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\rejir\AppData\Roaming\npm-cache\_logs\2018-11-28T14_20_35_305Z-debug.log

请帮助我配置 webpack。我的理解是我以错误的方式包含了 babel-loader。搜索stackoverflow的答案并没有给我解决问题的线索。如果有任何开发人员可以帮助我解决这个问题，那对我有好处。

提前致谢。

【问题讨论】：

您能否也发布您的packeges.json 文件的packeges 版本。
@zishe 更新了显示完整 package.json 的问题
谢谢。您正在使用有点过时的 babel 版本。你可以尝试使用this instead。我不确定，但我认为其他的事情是一样的。

标签： reactjs webpack babeljs webpack-4 babel-loader

【解决方案1】：

运行webpack命令时需要传递配置文件

"dev": "webpack --mode development ./src/index.js --output ./dist/main.js --config webpack.config.js",
"build": "webpack --mode production ./src/index.js --output ./dist/main.js --config webpack.config.js"

更多信息在这里 - use-custom-configuration-file

【讨论】：