使用webpack打包react项目中遇到的问题（一）

先简单说一下webpack使用的基本步揍：
首先使用npm下载webpack

npm install webpack -g //全局安装
npm install webpack --save-dev //本地安装

官方推荐本地安装、项目依赖比较清晰
安装react相关模块

npm install react --save-dev
npm install react-dom --save-dev

安装并配置babel相关模块，使其能够正确解析es6

npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install babel-preset-react babel-preset-es2015 --save-dev

//以下四个阶段插件版本选择一个安装都可以可以支持es7
babel-preset-stage-0
babel-preset-stage-1
babel-preset-stage-2
babel-preset-stage-3

写配置文件：在项目根目录下新建一个名为package.config.js的文件

module.exports = {
    entry: [
        './assets/js/ManageSystem.js'
    ],
    output: {
        path: __dirname + '/assets/',
        publicPath: "/assets/",
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.js|jsx$/,
            loaders: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }

        }]
    }
};

安装webpack开发服务器

npm install webpack-dev-server -g

使用以下命令编译文件，即无需每次修改都使用webpack命令编译

webpack-dev-server --progress --colors

问题一：报错react.render is not a function
原因：react API更新后 React 、ReactDom成为两个独立的package，应使用ReactDom中的render方法

import React from 'react';
React.render(<App />, document.getElementById('app'));

改为：

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

问题二：报错非法使用import声明

原因：使用babel解析es6失败，babel-preset-es2015没有安装，配置文件中依赖错误