loaders
现在盛行的语法react, 用的是独创的jsx语法，loaders参数可以让你的项目自动识别这些js结尾的文件，并且使这些文件支持jsx语法（我猜），然后将es6的语法自动给你编译成es2015
"babel-core": "6.x",
"babel-loader": "6.x",
"babel-preset-es2015": "6.x",
"babel-preset-react": "6.x",
"react": "15.x",
"react-dom": "15.x"
把这些包装好先
webpack.config.js
module.exports = {
entry: './app.js',
output: {
filename: 'output.js'
},
module: {
loaders:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react',
},
]
}
}
app.js
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<h1>哈哈，成功了</h1>, document.getElementById('root'));
index.html
<html>
<body>
<div id="root"></div>
<script type="text/javascript" src="output.js"></script>
</body>
</html>
再次打开localhost:8080
网友评论