Quantcast
Channel: CNode:Node.js专业中文社区
Viewing all articles
Browse latest Browse all 14821

webpack配置babel-loader编译import语句失败

$
0
0

着手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


Viewing all articles
Browse latest Browse all 14821

Trending Articles