我卡在了简单的 ReactJs + Webpack 结构初始化上。不确定我错过了什么,但应该是非常愚蠢的错误。
有人能否请帮忙找出错误或者我做错了什么?
简单的 ReactJs 代码:index.js
import React from "react";
import render from "react-dom";
class App extends React.Component {
render() {
return <p>hello world</p>;
}
}
render(<App />, window.document.getElementById('app'));
Webpack配置
import ExtraneousFileCleanupPlugin from 'webpack-extraneous-file-cleanup-plugin';
import manifestPlugin from 'webpack-manifest-plugin';
import CleanWebpackPlugin from 'clean-webpack-plugin';
import webpack from 'webpack';
import path from 'path';
let pathsToClean = [
'sp/common/css/*.css',
'sp/common/js/*.js',
];
// the clean options to use
let cleanOptions = {
root: path.resolve( __dirname, '../public'),
exclude: [],
verbose: false,
dry: false
};
module.exports = {
entry: {
'common/js/index' : [
'./src/js/index.jsx',
],
'common/js/vendor': [
'react', 'react-dom', 'react-router','axios',
'redux', 'react-redux', 'redux-logger', 'redux-thunk', 'redux-promise-middleware'
],
},
output: {
path: path.resolve(__dirname, '../public/'),
filename: 'sp/[name].[chunkhash].js'
},
module: {
rules: [
{
test: /\.js?$/,
include: path.resolve(__dirname, './src/js'),
exclude: [
path.resolve(__dirname, './build/'),
path.resolve(__dirname, './node_modules/'),
],
loader: 'babel',
options:{
babelrc: false,
presets: ['env', 'es2015', 'react', 'stage-2'],
},
},
{
enforce: "pre",
test: /\.js?$/,
include: path.resolve(__dirname, '/../src/js'),
exclude: [
path.resolve(__dirname, '/../build/'),
path.resolve(__dirname, '/../node_modules/'),
],
loader: 'eslint-loader',
},
],
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "common/js/common",
filename: "/sp/common/js/common.[chunkhash].js"
}),
new ExtraneousFileCleanupPlugin({
extensions: ['.js'],
minBytes: 1000,
manifestJsonName: '/public/sp.manifest.json',
paths: [
'sp/common/css',
'sp/common/js',
]
}),
new manifestPlugin({
'options': {
writeToFileEmit: true,
},
fileName: 'sp.manifest.json',
}),
new CleanWebpackPlugin(pathsToClean, cleanOptions), // clean the folders after generating new file
],
};
错误:
RROR in ./src/js/index.js
Module parse failed: Unexpected token (13:15)
You may need an appropriate loader to handle this file type.
| class App extends React.Component {
| render() {
| return <p>hello world</p>;
| }
| }
@ multi ./src/js/index.js
Webpack 版本:3.10
React 版本:16.2
React-dom 版本:16.2
React
。 - Ariful Haque