react+webpack+es6基础配置

今天折腾react,发现很多react+webpack的入门文章推荐里的webpack.config.js配置基本如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = {
entry: "./entry.js",
output: {
path: __dirname + '/dist',
filename: "bundle.js"
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [{
test: /\.js|jsx$/,
loader:'babel',
exclude: /node_modules/,
}]
}
}

兴致勃勃地写了个hello world,结果webpack编译时一直报错:

1
2
3
4
5
6
7
8
9
10
11
12
ERROR in ./entry.js
Module build failed: SyntaxError: E:/myCode/React/entry.js: Unexpected token (4:7)
2 | import {render} from 'react-dom';
3 | import Hello from './components/Hello';
4 | render(<Hello name="yunl" />,document.getElementById("test"));
| ^
5 |
6 |
at Parser.pp.raise (E:\myCode\React\node_modules\babel-core\node_modules\babylon\index.js:1425:13)
at Parser.pp.unexpected (E:\myCode\React\node_modules\babel-core\node_modules\babylon\index.js:2905:8)
at Parser.pp.parseExprAtom (E:\myCode\React\node_modules\babel-core\node_modules\babylon\index.js:754:12)
at Parser.pp.parseExprSubscripts (E:\myCode\React\node_modules\babel-core\node_modules\babylon\index.js:509:19)

逛了很多社区,发现给出的方案都不能解决问题,心里有成千上万的马奔腾而过啊!
最后折腾了很久发现,需要在webpack.config.js里添加:

查看更多

分享到