javascript - webpack 的“npm run build”，我收到错误...帮助我

Question

我在转译 webpack 时遇到以下错误。

**error message** 
$ npm run build

> webpack

Hash: d3c6c864b2d5118a08d7
Version: webpack 4.8.3
Time: 399ms
Built at: 2018-06-04 20:51:32
 1 asset
Entrypoint main = bundle.js
[0] ./src/index.js 249 bytes {0} [built] [failed] [1 error]

ERROR in ./src/index.js
Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
| import App from "../component/chatapp";
|
| ReactDOM.render(<App />, document.getElementById("root"));
|
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [0] (webpack)/buildin/module.js 519 bytes {0} [built]
    [1] (webpack)/buildin/global.js 509 bytes {0} [built]
        + 2 hidden modules
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! website@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the website@1.0.0 build 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\bca19\AppData\Roaming\npm-cache\_logs\2018-06-04T11_51_32_160Z-debug.log

webpack.config.js

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

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	entry: path.resolve(path.resolve(__dirname, "src"), "index.js"),
	output: {
		path: path.resolve(__dirname, "public"),
		filename: 'bundle.js'
	},
	mode: 'production',
	resolve: {
		extensions: ['js', '.jsx']
	},
	module: {
		rules: [{
			test: /\.(js|jsx)$/,
			loader: "babel-loader",
			include: [
				path.resolve(__dirname + "component"),
				path.resolve(__dirname + "src")
			],
			exclude: [
				path.resolve(__dirname, "node_modules")
			],
			query: {
				presets: ["react", "es2015"]
			}
		}, {
			test: /\.css$/,
			use: ExtractTextPlugin.extract({
				use: "css-loader"
			})
		}, {
			test: /\.scss$/,
			use: ExtractTextPlugin.extract({
				use: [
						"css-loader",
						"sass-loader"
					]
			})
		}]
	},
	plugins: [
		new HtmlWebpackPlugin({
			title: "광talk",
			filename: path.resolve(__dirname, "public", "index.html")
		})
	],
	devtool: "inline-source-map",
	devServer: {
		contenBase: path.resolve(__dirname, "public"),
		compress: true,
		port: 3000
	}
};

package.json

{
  "name": "website",
  "version": "1.0.0",
  "description": "test website",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --hot --inline"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3",
    "express-handlebars": "^3.0.0",
    "jquery": "^3.3.1",
    "path": "^0.12.7",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "socket.io": "^2.1.1"
  },
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "copy-webpack-plugin": "^4.5.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^3.2.0",
    "sass-loader": "^7.0.1",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "^3.1.4",
    "zombie": "^6.1.2"
  },
  "babel": {
    "presets": [
      "es2015"
    ]
  }
}

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "../component/chatapp";

ReactDOM.render(<App />, document.getElementById("root"));

chatapp.js

import React from "react";

class ChatApp extends React.Component {
	render() {
		return (
			<div>mission success</div>
		);
	}
}
export default ChatApp;

我不知道为什么我的代码不起作用。

Answer 1

可能是规则的路径不对，尝试一下 包括:[ 路径.resolve(__dirname,“组件”), 路径.resolve(__dirname ,"src") ],