先簡單說一下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沒有安裝，配置檔案中依賴錯誤