Vue.nextTick(function () {
  console.log('nextTick')
})

export const nextTick = (function () {
  const callbacks = [] //存放所有回调
  let pending = false //记录当前是否有回调在执行
  let timerFunc //一个函数，包装了一个能添加到microtask的函数

  // 在这里执行所有的回调，而这个函数的执行时机在下一个事件循环中
  function nextTickHandler () {
    pending = false
    // 将callbacks数组复制执行，因为如果在nextTick的回调函数中继续执行Vue.nextTick()
    // 则cb会不断被push到callbacks中，导致callbacks一直执行
    const copies = callbacks.slice(0)
    callbacks.length = 0
    for (let i = 0; i < copies.length; i++) {
      copies[i]()
    }
  }

  // the nextTick behavior leverages the microtask queue, which can be accessed
  // via either native Promise.then or MutationObserver.
  // MutationObserver has wider support, however it is seriously bugged in
  // UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
  // completely stops working after triggering a few times... so, if native
  // Promise is available, we will use it:
  /* istanbul ignore if */
  if (typeof Promise !== 'undefined' && isNative(Promise)) {
    var p = Promise.resolve()
    var logError = err => { console.error(err) }
    // 如果能用Promise则通过Promise.then把nextTickHandler添加到microtask
    timerFunc = () => {
      p.then(nextTickHandler).catch(logError)
      if (isIOS) setTimeout(noop)
    }
  } else if (typeof MutationObserver !== 'undefined' && (
    isNative(MutationObserver) ||
    MutationObserver.toString() === '[object MutationObserverConstructor]'
  )) {
   // 如果能用MutationObserver，则人为的创建一个textNode，
   // 并让MutationObserver监听这个textNode，在timerFunc中改变这个textNode，
   // 由此触发MutationObserver的回调(这里涉及MutationObserver的工作方式，看看MDN文档就好)，
   // 实现在下一次事件循环执行nextTickHandler的目的
    var counter = 1
    var observer = new MutationObserver(nextTickHandler)
    var textNode = document.createTextNode(String(counter))
    observer.observe(textNode, {
      characterData: true
    })
    timerFunc = () => {
      counter = (counter + 1) % 2
      textNode.data = String(counter)
    }
  } else {
    //都不行只能用setTimeout实现，将nextTickHandler添加到macrotask中
    timerFunc = () => {
      setTimeout(nextTickHandler, 0)
    }
  }

  return function queueNextTick (cb?: Function, ctx?: Object) {
    let _resolve
    callbacks.push(() => {
      if (cb) cb.call(ctx)
      if (_resolve) _resolve(ctx)
    })
    if (!pending) {
      pending = true
      timerFunc()
    }
    if (!cb && typeof Promise !== 'undefined') {
      return new Promise(resolve => {
        _resolve = resolve
      })
    }
  }
})()

componentDidMount() {
  this.setState({val: this.state.val + 1});
  console.log(this.state.val);    // 第 1 次 log

  this.setState({val: this.state.val + 1});
  console.log(this.state.val);    // 第 2 次 log

  setTimeout(() => {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);  // 第 3 次 log

    this.setState({val: this.state.val + 1});
    console.log(this.state.val);  // 第 4 次 log
  }, 0);
}

const firstState =(state = {}, action){
  switch (action.type) {
    case 'ACTION_ONE':
      return {
        // 返回一个新的state
      }
    default:
      return {
        // 返回一个默认的state
      }
  }
}
// ...secondState类似

// 合并
const rootReducer = combineReducers({
    firstState,
    secondState
})

let store = createStore(
    rootReducer,
    // 关于中间件放到第二篇
    applyMiddleware(thunk)
);

<Provider store={store}>
  // 放一些自己的组件，如：
  <MyComponent></MyComponent>
</Provider>

store = {
    dispatch, // 即常用的dispatch函数
    subscribe,
    getState, // 通过它可以获取整个state
    replaceReducer
}

export default class Provider extends Component {
  // react为实现跨级组件通信提供的api，从这一层往下的子组件都可以通过context.store直接拿到store，类似于一个全局变量
  getChildContext() {
    return { store: this.store, storeSubscription: null }
  }

  constructor(props, context) {
    super(props, context)
    // this.store来自于props
    this.store = props.store
  }

  render() {
    return Children.only(this.props.children)
  }
}

export default class MyComponent extends Component{
  // ...省略
  render() {
    // 这里this.props已经包含firstState
  }
}

// 这里传入的state是通过store.getState()获取到的值，即整个应用的state
function mapStateToProps(state) {
  // 在这里可以从整个state中提取一些在该组件需要用到的属性，比如这里的firstState
    const {firstState} = state
    // 通常需要返回一个对象，对象中的属性将通过下面的connect函数注入到组件的props中，
    return {
        firstState
    }
}

export default connect(mapStateToProps)(MyComponent)

function connect(
    mapStateToProps,
    mapDispatchToProps,
    mergeProps
  ) {
    // match函数中对mapStateToProps做一些处理，
    // 定义了mapStateToProps缺失或者mapStateToProps是一个函数时如何处理，
    // 如果mapStateToProps是一个函数，将对它进行一个包装，返回
    // function initProxySelector(dispatch, { displayName }) {...}
    // 即initMapStateToProps指向function initProxySelector(dispatch, { displayName }) {...}
    // 至于为什么这么做我还没搞懂
    const initMapStateToProps = match(mapStateToProps, mapStateToPropsFactories, 'mapStateToProps')
    const initMapDispatchToProps = match(mapDispatchToProps, mapDispatchToPropsFactories, 'mapDispatchToProps')
    const initMergeProps = match(mergeProps, mergePropsFactories, 'mergeProps')
    // 这里返回connectHOC()的执行结果，传递了一系列参数包括mapStateToProps，
    // 这个函数其实就是 /src/components/connectAdvanced.js中的connectAdvanced()
    // 在这个connectAdvanced里定义了一些contextTypes(猜测是为了从context上获取store)
    // 然后返回了wrapWithConnect(WrappedComponent){}函数
    // 至此connect(mapStateToProps)就执行完了，返回wrapWithConnect(WrappedComponent){}函数
    return connectHOC(selectorFactory, {
      initMapStateToProps,
      initMapDispatchToProps,
      initMergeProps,
    })
  }

// 只截取了部分

// 重点关注run方法
function makeSelectorStateful(sourceSelector, store) {
  // wrap the selector in an object that tracks its results between runs.
  const selector = {
    // 下面会多次调用run方法，将在这里比较新旧props，并设置 selector.shouldComponentUpdate
    run: function runComponentSelector(props) {
      try {
        const nextProps = sourceSelector(store.getState(), props)
        if (nextProps !== selector.props || selector.error) {
          selector.shouldComponentUpdate = true
          selector.props = nextProps
          selector.error = null
        }
      } catch (error) {
        selector.shouldComponentUpdate = true
        selector.error = error
      }
    }
  }

  return selector
}

function wrapWithConnect(WrappedComponent) {
    // 高阶组件的通常用法，创建一个Connect组件，用来包装我们传入的WrappedComponent
    class Connect extends Component {
      constructor(props, context) {
        super(props, context)
        // 获取到Provider中的store
        this.store = props[storeKey] || context[storeKey]

        this.initSelector()
        // 初始化Subscription，用于发布订阅模式
        this.initSubscription()
      }

      componentDidMount() {
        if (!shouldHandleStateChanges) return

        // 订阅store，一个发布订阅模式，当store发生变化时调用onStateChange
        this.subscription.trySubscribe()
      }

      componentWillReceiveProps(nextProps) {
        this.selector.run(nextProps)
      }

      shouldComponentUpdate() {
        // 通过this.selector.shouldComponentUpdate属性避免不必要的更新，
        // 所以使用了redux之后是不需要自己通过shouldComponentUpdate优化的
        return this.selector.shouldComponentUpdate
      }

      initSelector() {
        const sourceSelector = selectorFactory(this.store.dispatch, selectorFactoryOptions)

        this.selector = makeSelectorStateful(sourceSelector, this.store)
        // 将在run方法中调用mapStateToProps，返回值赋给this.selector.props
        this.selector.run(this.props)
      }

      initSubscription() {
        if (!shouldHandleStateChanges) return

        const parentSub = (this.propsMode ? this.props : this.context)[subscriptionKey]
        this.subscription = new Subscription(this.store, parentSub, this.onStateChange.bind(this))
      }
      // store发生变化时调用
      onStateChange() {
        this.selector.run(this.props)
        // setState触发react的更新，这里dummyState是一个空对象，
        // 只是为了触发react的更新机制，在更新机制中会从通过store.getState()获取最新的state
        this.setState(dummyState)
      }


      render() {
        // 在这里将额外的props(包括dispatch和mapStateToProps返回值)合并到WrappedComponent(即这里的MyComponent组件)
        return createElement(WrappedComponent, this.addExtraProps(selector.props))
      }
    }

    return hoistStatics(Connect, WrappedComponent)
  }
}

function selectionSort(arr) {
    for (let i = 0, len = arr.length; i < len; i++) {
        let min = i;
        for (let j = i + 1; j < len; j++) {
            if (arr[j] < arr[min]) {
                min = j
            }
        }
        if (min !== i) {
            swap(arr, min, i) //交换
        }
    }
}

function bubbleSort(arr) {
    for (let i = 0, len = arr.length; i < len - 1; i++) {
        for (let j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                swap(arr, j + 1, j);
            }
        }
    }
}

function insertionSorting(arr) {
    let temp,j
    for (let i = 1, len = arr.length; i < len; i++) {
        temp = arr[i]
        j = i - 1
        while (j >= 0 && arr[j] > temp) {
            arr[j + 1] = arr[j]
            j--
        }
        arr[j + 1] = temp
    }
}

// 原地快排
function quickSort(arr, left = 0, len = arr.length) {
    let pivot
    if (left < len) {
        pivot = patition(arr, left, len)
        quickSort(arr, left, pivot - 1)
        quickSort(arr, pivot, len)
    }
    function patition(arr, left = 0, len = arr.length) {
        let pivot = left
        for (let right = left + 1; right < len; right++) {
            if (arr[pivot] >= arr[right]) {
                left++
                swap(arr, left, right)
            }
        }
        swap(arr, left, pivot)
        return left + 1
    }
}

// js版实现
function quickSort(arr){
  if (arr.length <= 1)  return arr
　　let pivotIndex = Math.floor(arr.length / 2)
　　let pivot = arr.splice(pivotIndex, 1)[0]
　　let left = []
　　let right = []
　　for (let i = 0; i < arr.length; i++){
　　　　if (arr[i] < pivot) {
　　　　　　left.push(arr[i])
　　　　} else {
　　　　　　right.push(arr[i])
　　　　}
　　}
　　return quickSort(left).concat([pivot], quickSort(right))
}

// 递归版
function mergeSort(arr) {
    function merge(left, right) {
        let result = []
        while (left.length && right.length) {
            result.push(left[0] <= right[0] ? left.shift() : right.shift())
        }
        return result.concat(left.concat(right))
    }

    let len = arr.length, mid = parseInt(len / 2)
    if (len < 2) return arr
    return merge(mergeSort(arr.slice(0, mid)), mergeSort(arr.slice(mid)))
}

function heapSort(arr) {
    let len = arr.length

    function maxHeapify(start, end) {
        let dad = start, son = dad * 2 + 1
        if (son >= end) return
        if (son + 1 < end && arr[son] < arr[son + 1]) // 比较两个子节点大小，选择较大的
            son++
        if (arr[dad] <= arr[son]) {
            swap(arr, dad, son)
            maxHeapify(son, end) // 递归调整
        }
    }

    // 创建最大堆，从最后一个父节点来时调整
    for (let i = Math.floor(len / 2) - 1; i >= 0; i--) {
        maxHeapify(i, len);
    }
    // 堆排序
    for (let i = len - 1; i > 0; i--) {
        swap(arr, 0, i);
        maxHeapify(0, i);
    }
}

const firstState =(state = {}, action){
  switch (action.type) {
    case 'ACTION_ONE':
      return {
        // 返回一个新的state
      }
    default:
      return {
        // 返回一个默认的state
      }
  }
}
// ...secondState类似

// 合并
const rootReducer = combineReducers({
    firstState,
    secondState
})

export default function combineReducers(reducers) {
  const reducerKeys = Object.keys(reducers)
  const finalReducers = {}
  // 筛选出reducer是function的部分保存到finalReducers中
  for (let i = 0; i < reducerKeys.length; i++) {
    const key = reducerKeys[i]

    if (process.env.NODE_ENV !== 'production') {
      if (typeof reducers[key] === 'undefined') {
        warning(`No reducer provided for key "${key}"`)
      }
    }

    if (typeof reducers[key] === 'function') {
      finalReducers[key] = reducers[key]
    }
  }
  const finalReducerKeys = Object.keys(finalReducers)

  // 返回一个function，它的调用时机在每一次dispatch中
  // 所以combineReducers只是对传入的reducers进行了一些筛选，
  // 然后利用闭包把这些reducers保存下来
  return function combination(state = {}, action) {

    let hasChanged = false
    const nextState = {}
    for (let i = 0; i < finalReducerKeys.length; i++) {
      // 这里key就是firstState，secondState
      const key = finalReducerKeys[i]
      // 对应的reducer function
      const reducer = finalReducers[key]
      // 根据key获取前一个state
      const previousStateForKey = state[key]
      // 执行reducer function，这里可以看到上面提到的困惑中的第二点是如何实现的
      // 返回值作为下一个state
      const nextStateForKey = reducer(previousStateForKey, action)
      // reducer function必须有返回值
      if (typeof nextStateForKey === 'undefined') {
        const errorMessage = getUndefinedStateErrorMessage(key, action)
        throw new Error(errorMessage)
      }
      nextState[key] = nextStateForKey
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey
    }
    // 返回新的state
    return hasChanged ? nextState : state
  }
}

// 第一个参数reducer在这个例子里就是combineReducers执行结果，即combination函数
export default function createStore(reducer, preloadedState, enhancer) {
  // 进行一些参数转化，比如preloadedState缺失，只传入了enhancer的情况
  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
    enhancer = preloadedState
    preloadedState = undefined
  }

  if (typeof enhancer !== 'undefined') {
    // 如果有传入合法的enhance，则通过enhancer再调用一次createStore
    // 比如在分析applyMiddleware时会用到
    return enhancer(createStore)(reducer, preloadedState)
  }

  let currentReducer = reducer
  let currentState = preloadedState
  let currentListeners = []
  let nextListeners = currentListeners
  let isDispatching = false

  function ensureCanMutateNextListeners() {
    if (nextListeners === currentListeners) {
      nextListeners = currentListeners.slice()
    }
  }

  // 暴露出获取全局state的方法
  function getState() {
    return currentState
  }

  /**
   * Adds a change listener. It will be called any time an action is dispatched,
   * and some part of the state tree may potentially have changed. You may then
   * call `getState()` to read the current state tree inside the callback.
   *
   * You may call `dispatch()` from a change listener, with the following
   * caveats:
   *
   * 1\. The subscriptions are snapshotted just before every `dispatch()` call.
   * If you subscribe or unsubscribe while the listeners are being invoked, this
   * will not have any effect on the `dispatch()` that is currently in progress.
   * However, the next `dispatch()` call, whether nested or not, will use a more
   * recent snapshot of the subscription list.
   *
   * 2\. The listener should not expect to see all state changes, as the state
   * might have been updated multiple times during a nested `dispatch()` before
   * the listener is called. It is, however, guaranteed that all subscribers
   * registered before the `dispatch()` started will be called with the latest
   * state by the time it exits.
   *
   * @param {Function} listener A callback to be invoked on every dispatch.
   * @returns {Function} A function to remove this change listener.
   */
   // 配合react-redux的话这里的listener传入的就是onStateChange
  function subscribe(listener) {
    if (typeof listener !== 'function') {
      throw new Error('Expected listener to be a function.')
    }

    let isSubscribed = true

    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    return function unsubscribe() {
      if (!isSubscribed) {
        return
      }

      isSubscribed = false

      ensureCanMutateNextListeners()
      const index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1)
    }
  }

  /**
   * Dispatches an action. It is the only way to trigger a state change.
   *
   * The `reducer` function, used to create the store, will be called with the
   * current state tree and the given `action`. Its return value will
   * be considered the **next** state of the tree, and the change listeners
   * will be notified.
   *
   * The base implementation only supports plain object actions. If you want to
   * dispatch a Promise, an Observable, a thunk, or something else, you need to
   * wrap your store creating function into the corresponding middleware. For
   * example, see the documentation for the `redux-thunk` package. Even the
   * middleware will eventually dispatch plain object actions using this method.
   *
   * @param {Object} action A plain object representing “what changed”. It is
   * a good idea to keep actions serializable so you can record and replay user
   * sessions, or use the time travelling `redux-devtools`. An action must have
   * a `type` property which may not be `undefined`. It is a good idea to use
   * string constants for action types.
   *
   * @returns {Object} For convenience, the same action object you dispatched.
   *
   * Note that, if you use a custom middleware, it may wrap `dispatch()` to
   * return something else (for example, a Promise you can await).
   */
  function dispatch(action) {
    if (!isPlainObject(action)) {
      throw new Error(
        'Actions must be plain objects. ' +
        'Use custom middleware for async actions.'
      )
    }

    if (typeof action.type === 'undefined') {
      throw new Error(
        'Actions may not have an undefined "type" property. ' +
        'Have you misspelled a constant?'
      )
    }

    if (isDispatching) {
      throw new Error('Reducers may not dispatch actions.')
    }

    try {
      isDispatching = true
      // 将在这里执行传入的reducer,
      // 在这个例子中reducer就是上面提到combination函数，可以看到传入的参数是当前整个state和action
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }

    const listeners = currentListeners = nextListeners
    // 执行订阅的回调
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }

    return action
  }


  // When a store is created, an "INIT" action is dispatched so that every
  // reducer returns their initial state. This effectively populates
  // the initial state tree.
  // 英文注释很清楚了，不解释了
  dispatch({ type: ActionTypes.INIT })
  // 返回的就是一个store对象，即上一篇一直提到的store
  return {
    dispatch,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable
  }
}

Vue.use = function (plugin: Function | Object) {
   /* istanbul ignore if */
   if (plugin.installed) {
     return
   }
   // additional parameters
   const args = toArray(arguments, 1)
   args.unshift(this) //使第一个参数变为Vue，剩下的直接传过去
   if (typeof plugin.install === 'function') {
     plugin.install.apply(plugin, args)
   } else {
     plugin.apply(null, args)
   }
   plugin.installed = true
   return this
 }

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (options) {
    // 逻辑...
  }
}

Vue.mixin = function (mixin: Object) {
    Vue.options = mergeOptions(Vue.options, mixin)
}

  const usesInit = Vue.config._lifecycleHooks.indexOf('init') > -1
  //1.0用钩子函数init，2.0用beforeCreate
  Vue.mixin(usesInit ? { init: vuexInit } : { beforeCreate: vuexInit })
  /**
   * Vuex init hook, injected into each instances init hooks list.
   */

  function vuexInit () {
    const options = this.$options
    // store injection
    if (options.store) {
      this.$store = options.store
    } else if (options.parent && options.parent.$store) {
      this.$store = options.parent.$store
    }
  }

_assetTypes: [
  'component',
  'directive',
  'filter'
]

config._assetTypes.forEach(type => {
  Vue[type] = function (
    id: string,
    definition: Function | Object
  ): Function | Object | void {
    if (!definition) {
      return this.options[type + 's'][id]
    } else {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production') {
        if (type === 'component' && config.isReservedTag(id)) {
          warn(
            'Do not use built-in or reserved HTML elements as component ' +
            'id: ' + id
          )
        }
      }
      if (type === 'component' && isPlainObject(definition)) {
        definition.name = definition.name || id
        definition = this.options._base.extend(definition)
      }
      if (type === 'directive' && typeof definition === 'function') {
        definition = { bind: definition, update: definition }
      }
      this.options[type + 's'][id] = definition //这里
      return definition
    }
  }
})

/**
 * Convert HTML string to AST.
 */
export function parse (
  template: string,
  options: CompilerOptions
): ASTElement | void {
  //....省略大量代码，具体实现在src/compiler/parser 
}

export function generate (
  ast: ASTElement | void,
  options: CompilerOptions
): {
  render: string,
  staticRenderFns: Array<string>
} {
  //...省略，在src/compiler/codegen/index.js
}

<body>
<div id="app">
    <h1 v-test="message"></h1>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });
</script>
</body>

return {
  // 渲染函数，执行后生成vdom
    render: ("with(this){return " + code + "}"), //code =_c('div',{attrs:{"id":"app"}},[_c('h1',{directives:[{name:"test",rawName:"v-test",value:(message),expression:"message"}]})])
    staticRenderFns: currentStaticRenderFns
}

// webpack运行时可以提供参数，比如区分是生产环境还是开发环境
module.exports = (options = {}) => {
  return {
    // 在这里写配置
  }
}

entry: {
    main: './src/index.js',
},
output: {
  　// 开发环境的话就没必要用chunk了，直接输出默认名字，
    // 生产环境打包时webpack会给文件名加上一段hash，代码改动hash值就会变
    filename: options.dev ? '[name].js' : '[chunkhash].[name].js',
    // 打包到dist目录下
    path: path.resolve(__dirname, 'dist')
},
module: {
    // 配置一些loader
    rules: [
        {
            test: /\.js$/,
            // babel转码时把node_modules中的js排除
            exclude: /node_modules/,
            use: [{
                loader: 'babel-loader',
                // babel配置
                options: {
                  　　// 暂时只配置转码ES6，并且将modules设为false防止babel将ES6的import转成CommonJS，
                   　//因为webpack2是可以自己处理import的
                    presets: [['es2015', {modules: false}]],
                    // 用了几个babel插件，为了使用async/await
                    plugins: [
                        'transform-async-to-generator',
                        'transform-regenerator',
                        'transform-runtime'
                    ]
                }
            }]
        },
        {
            test: /\.html$/,
            use: 'html-loader'
        },
        {
            test: /\.css$/,
            // 将CSS分离打包
            use: ExtractTextPlugin.extract({
                use: 'css-loader'
            })

        },

        {
            test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 10000
                    }
                }
            ]
        }
    ]
},
// 在这里注册用到的插件
plugins: [
    // 分离CSS文件
    new ExtractTextPlugin('styles.css'),
    // 处理html的插件，会根据打包结果自动生成script，style标签，
    new HtmlWebpackPlugin({
        template: './index.html'
    }),
    // 以下这段代码直接从vue-cli复制来的，将依赖库和自己开发的文件分开打包，
   // 因为如果打包到一起的话每次本地代码有变动都会重新打包生成新的hash文件名，
    // 这样无法利用浏览器缓存，而其实依赖库的代码一般是没有变动的，分开打包可以利用浏览器缓存
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: function (module, count) {
            // any required modules inside node_modules are extracted to vendor
            return (
                module.resource &&
                /\.js$/.test(module.resource) &&
                module.resource.indexOf(
                    path.join(__dirname, './node_modules')
                ) === 0
            )
        }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
        name: 'manifest',
        chunks: ['vendor']
    })
],
// webpack-dev-server的配置
devServer: {
    // 配置本地监听端口
    port: 3000,
    historyApiFallback: true,
    // 在这里可以配置反向代理
    proxy: {
        '/api': {
            target: 'http://localhost:3001',
            secure: false,
            changeOrigin: true,
        }
    }
}

;(function (window) {
     function EventProxy() {
        this.handlers = {} // 存放所有添加的事件
    }

    EventProxy.prototype = {
        on: function (eventName, handler) {
            this.handlers[eventName] = this.handlers[eventName] || [];
            this.handlers[eventName].push(handler);
        },
        once: function (eventName, handler) {
            var self = this
            // 改写原回调，使执行一次后删除
            var wrapper = function () {
                handler.apply(self, arguments);
                self.off(eventName, wrapper);
            };
            this.on(eventName, wrapper)
        },
        emit: function (eventName) {
            var args = Array.prototype.slice.call(arguments, 1) // 取出传入的参数
            for (var i = 0,len = this.handlers[eventName].length; i < len; i++) {
                this.handlers[eventName][i].apply(this, args);
            }
        },
        off: function (eventName, handler) {
            var handlers = this.handlers[eventName],i
            if (handlers && handler) {
                i = handlers.indexOf(handler)
                handlers.splice(i, 1)
            }else {
                this.handlers[eventName] = []
            }
        }
    }   

    window.EventProxy =  EventProxy
})(window)

var ep = new EventProxy ()
ep.on("event1",function () {
    console.log("event1 emit 1")
})

ep.emit("event1")  // event1 emit 1

ep.on("event1",function (value) {
    console.log("event1 emit " + value)
})

ep.emit("event1","一些参数") // event1 emit 1
                            // event1 emit 一些参数

ep.once("event2",function (value) {
    console.log("event2 emit once " + value)
})

ep.emit("event2", "一些参数") // event2 emit once 一些参数
ep.emit("event2", "一些参数") 
ep.off("event1")
ep.emit("event1")