着手redux
,遇到很基础的jsx代码编译,下面是webpack配置文件,项目代码在这里todo list example jsx files
const webpack = require('webpack')
const join = require('path').join
module.exports = {
entry: {
index: join(__dirname, 'client/index.jsx'),
vendor: ['react', 'react-dom', 'react-redux']
},
output: {
path: join(__dirname, 'public/js'),
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react', 'stage-0']
}
}
],
resolve: {
root: './client',
extensions: ['', '.js', '.jsx']
},
plugins: [
new webpack.PrefetchPlugin('react'),
new webpack.PrefetchPlugin('react-dom'),
new webpack.PrefetchPlugin('react-redux'),
new webpack.optimize.CommonsChunkPlugin({
filename: 'vendor.js',
name: 'vendor'
})
]
}
代码结构如下:
-webpack.config.js
+client
+components
-AddTodo.jsx
-Footer.jsx
-Todo.jsx
-TodoList.jsx
+containers
-App.jsx
-index.jsx
编译后的结果是这样,wtf:
webpackJsonp([0],[
/* 0 */
/***/ function(module, exports) {
import { render } from 'react-dom'
import App from './containers/App'
render(App, document.getElementById('container'))
/***/ }
]);
中间的import
纹丝未动,但是babel-cli
执行是可以的babel client/index.jsx --presets es2015,react