嗨,我正在阅读本教程,并且已经根据本教程设置了Webpack配置。
无论我有以下文件 index.js
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import AppComp from './components/App'
let store = createStore(todoApp)
let App = React.createClass({
render: () => {
return (
<Provider store={store}>
<AppComp />
</Provider>
)
}
});
render(
<App/>,
document.getElementById('app')
)
而我的webpack配置是
var HtmlWebpackPlugin = require ('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: [
'./app/index.js'
],
output: {
path: __dirname + '/dist',
filename: 'index_build.js'
},
module: {
loaders: [
{
test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', presets: ['es2015', 'react']
},
]
},
plugins: [HtmlWebpackPluginConfig]
};
当我使用webpack运行应用程序时,出现以下错误
ERROR in ./app/index.js
Module build failed: SyntaxError: Unexpected token (13:6)
11 | render: () => {
12 | return (
> 13 | <Provider store={store}>
| ^
14 | <App />
15 | </Provider>
16 | )
任何人都可以帮助我解决此错误?
编辑:问题是我定义Webpack配置的方式,预设应位于查询块内。这是我更新的webpack配置文件
var HtmlWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: [
'./app/index.js'
],
output: {
path: __dirname + '/dist',
filename: "index_bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'babel-preset-react']
}
}
]
},
plugins: [HTMLWebpackPluginConfig]
};
您必须指定babel预设。您可以使用.babelrc
{
"presets": [
"react",
"es2015"
]
}
或者您可以在您的加载程序查询中指定它:
loaders: [ 'babel?presets[]=react,presets[]=es2015' ]
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句