laravel+react+webpack+babel+gulp的配置

babel升级6.x后配置与之前不同。

laravel

composer create-project laravel/laravel --prefer-dist

npm

npm install gulp webpack -g
npm install react react-dom babel-loader babel-preset-es2015 babel-preset-react --save-dev

webpack.config.js

var path = require('path');
var config = {
 entry: path.resolve(__dirname, 'resources/assets/js/main.js'),
 output: {
 path: path.resolve(__dirname, 'public/js'),
 filename: 'bundle.js'
 },
 resolve: {
 extensions: ['', '.js', '.jsx']
 },
 module: {
 loaders: [
 {
 test: /\.jsx?$/,
 exclude: /node_modules/,
 loader: 'babel',
 query: {
 presets: ['es2015', 'react']
 }
 }
 ]
 }
};
module.exports = config;

main.js

import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(<h1>asd</h1>, document.getElementById('app'));

build

webpack -w

html

<!doctype html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>react</title>
</head>
<body>
<div id="app"></div>
<script src="js/bundle.js"></script>
</body>
</html>