Я получил следующую ошибку при переносе веб-пакета.
**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;
Я не знаю, почему мои коды не работают.