![](/img/trans.png)
[英]Module parse failed: Unexpected token (7:5) You may need an appropriate loader to handle this file type. : Webpack, Bootstrap
[英]Webpack + React: Module parse failed: Unexpected token: You may need an appropriate loader
堅持簡單的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
解決了它。 我的includ
, babel-loader
和eslint-loader
exclude
文件夾是錯誤的。 糾正了它和它的工作正常。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.