webpack学习记录02

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(
哈哈，成功了
, document.getElementById('root'));

index.html

再次打开localhost:8080