import {connect} from 'react-redux';

import Topic from '../components/topic';

const mapStateToProps = (state) => {
    return {
        info: state.topicInfo
    }
}

const mapDispatchToProps = (dispatch) => {

}

export default connect(mapStateToProps, mapDispatchToProps)(Topic)

上面的container就是将topic的业务组件进行了一个包裹并将数据通过props传入给了topic。

组件的原则

1. state状态应尽量简单
2. 单向原则，子组件不应该影响父组件，当某个子组件删除后，只会影响此子组件的UI展示，其他组件都不应该产生影响
3. 参数的扁平化，接收的props应该尽量做到是基本数据类型。

function bindActionCreator(actionCreator, dispatch) {
  return (...args) => dispatch(actionCreator(...args))
}

export default function bindActionCreators(actionCreators, dispatch) {
  if (typeof actionCreators === 'function') {
    return bindActionCreator(actionCreators, dispatch)
  }

  if (typeof actionCreators !== 'object' || actionCreators === null) {
    throw new Error(
      `bindActionCreators expected an object or a function, instead received ${actionCreators === null ? 'null' : typeof actionCreators}. ` +
      `Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?`
    )
  }

  var keys = Object.keys(actionCreators)
  var boundActionCreators = {}
  for (var i = 0; i < keys.length; i++) {
    var key = keys[i]
    var actionCreator = actionCreators[key]
    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  return boundActionCreators
}

其接收一个function或一个通过import * as actions from获取到的action对象，第二个参数是dispatch

当是一个对象时，会遍历每个属性，然后将其对应的actionCreator通过一个高阶函数包裹一层dispatch，这样直接调用时就可以察觉不到dispatch的存在。函数最终返回一个新的对象，各属性对应的值是已经包裹过dispatch的函数。

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

选择排序

function selectSort(arr) {
    var min;
    for (var i = 0; i< arr.length - 1; i++) {
        min = i;
        for (j = i + 1; j < arr.length; j++) {
            if (arr[min] > arr[j]) {
                min = j;
            }
        }
        if (min !== i) {
            var temp = arr[i];
            arr[i] = arr[min];
            arr[min] = temp; 
        }
    }
    return arr
}

function insertSort(arr) {
    var key;
    for (var i = 0; i< arr.length; i++) {
        var j = i;
        key = arr[j];
        while(--j > -1) {
            if (arr[j] > key) {
                arr[j + 1] = arr[j];
            } else {
                break;
            }
        }
        arr[j + 1] = key;
    }
    return arr
}

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

<style>
.wrap {
	width: 600px;
   display: flex;
}
.item {
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #fff;
}
.item1 {
	width: 200px;
	flex: 2 1 0%;
	background: #f00;
}
.item2 {
	width: 150px;
	flex: 2 1 auto;
	background: #0f0;
}
.item3 {
	flex: 1 1 200px;
	background: #00f;
}
</style>

<div class="wrap">
	<div class="item item1">item1</div>
	<div class="item item2">item2</div>
	<div class="item item3">item3</div>
</div>

具体宽度数值请戳我查看

通过例子发现，实际宽度都不是我们上述设置的宽度或者基准宽度，我们来看看它的计算方式。

主轴总长度为600，子项基准宽度加起来为 0 + 150 + 200 = 350（PS.当flex-basis设置为0%的时候，其设置的宽度将不起任何作用，如item1中的wdith）

因此还剩余宽度为 600 - 350 = 250

flex-grow系数为 2 + 2 + 1 = 5

每一项将分配的剩余宽度计算方式为
w = (flex-grow /所有flex-grow的总和) * 剩余值

因此实际长度为 item1 = 0 + 250*2/5 = 100 或 content的尺寸

item2 = 150 + 250*2/5 = 250

item3 = 200 + 250*1/5 = 250

极端情况，若将wrap宽度改为400，虽然还是会有剩余宽度 400 - 350 = 50，但通过计算后

item1 = 0 + 50*2/5 = 20，已经小余其content的尺寸了，因此item1就等于其content尺寸38.77，此时其他项的剩余宽度将减少 38.77 - 20 = 18.77，各子项尺寸将按flex-grow的比例去分掉这18.77

item2 = 150 + 50*2/5 - 18.77/3*2 = 157.48

item3 = 200 + 50*2/5 - 18.77/3*1 = 203.74

至于为什么是felx-grow大一些，最后要减掉的多一些，我就不得而知了

当子项基准宽度加起来大于主轴总长度时，子项将会被压缩，请自行修改上述例子wrap的宽度为300查看效果

因为item1基准值为0，其尺寸将直接等于其内容content的尺寸，通过例子可以看到item宽度为38.77px

因此子元素基准值加起来溢出值为 350-(300-38.77) = 88.77

加权值计算公式为 所有子项flex-basis*flex-shrink的总和

s = 0*1 + 150*1 + 200*1 = 350

每项压缩的长度 w = (flex-basis*flex-shrink / s) * 溢出的值

w-item1 = 0*1/350*88.77 = 0;

w-item2 = 150*1/350*88.77 = 38.044

w-item3 = 200*1/350*88.77 = 28.57

item1 = content - 0 = content

item2 = 150 - 38.044 = 111.95

item3 = 200 - 28.57 = 149.27

module.exports = {
    entry: {
        index: path.resolve(__dirname, '../src/js/index.js'),
        index2: path.resolve(__dirname, '../src/js/index2.js'),
        vendor: ['react', 'react-dom'] //第三方模块
    },

    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: '[name].[hash:8].js',
        publicPath: '/'
    },
    
    module: {
        rules: [{
            test: /\.jsx?$/,
            use: ['babel-loader'],
            exclude: /node_modules/
        }
        //省略其他loader
        ]
    },
    
    plugins: [
    	 new CommonsChunkPlugin({
            name: 'vendor'
        })
        //省略其他plugin
    ] 
}

打包结果如下：

这里的hash是每次编译时所计算出来的一个值，因此当任何一个文件修改，hash都将会改变，而且所打包出来的文件名也将不一样了，这样对于需频繁发布的项目不是很友好，会造成每次有新版本，用户浏览器都将重新下载所有的文件，为了避免这种情况，webpack还提供了chunkhash（注：这里提取出的css文件hash值不一样，是因为使用的是extract-text-webpack-plugin插件，它提供了自己的一个contenhash，也是对于css文件建议的一种用法，保证了css有自己独立的hash，不会受到js文件的干扰）

将上述代码中的hash换成chunkhash后打包结果如下：

看到每个chunk有自己单独的hash值，此时只修改某一个模块里的文件，将不会影响到其他的模块打包出的hash值了，这样也就能充分利用hash缓存了。

你以为到此处就结束了吗，too young too simple！

你可以试试改动一个文件，打包后vendor的hash值每次都是在变化的，第三方模块是最不长改动的模块，更应该被缓存住，可为什么vendor的chunkhash总是变化，是因为webpack runtime由于entry对应的Id变化而发生了变化，chunkhash的计算又依赖于runtime，因此vendor的chunkhash也发生了变化。

为了解决这个问题，我们首先得保证chunkId的稳定，参考webpack2的文档caching，可以使用HashedModuleIdsPlugin的插件(webpack1也可以使用，但需要将HashedModuleIdsPlugin.js自行引入)，然后就是创建一个额外的chunk来提取runtime，就是文档中说的manifest，部分代码如下

plugins: [
    new CommonsChunkPlugin({
	names: ['vendor', 'manifest'],
        minChunks: Infinity
    }),
    new webapck.HashedModuleIdsPlugin()
]

class Tooltip extends React.component {
    //省略部分代码，直接看render

    render() {
        const {placement} = this.props;
        return(
            <div className="tooltip tooltip-right">
                {this.props.children}
            </div>
        )
    }
}
//调用的地方
import Tooltip from 'somepath/Tooltip';
class BusinessComp extends React.component {
    constructor(props) {
        super(props);
        this.state = {
            showTip: false
        }
        this.handleShowTip = this.handleShowTip.bind(this);
    }

    handleShowTip() {
        //计算tip位置的代码，并放入tipData中

        this.setState({
            showTip: !showTip
            tipData: tipData
        })
    }

    tipRender() {
        if (this.state.showTip) {
            return (
                <Tooltip style={style}>我是tip</Tooltip>
            )
        }
    }

    render() {
        return (
            <div>
                <span onClick={this.handleShowTip}></span>

                {this.tipRender()}
            </div>

        )
    }
}

这样造成每次页面都要去计算tip位置，并通过props传入，而且render出来的tip也是属于当前页面元素内部，有可能嵌套过多时样式会出现问题，后来通过观察ant-design的组件样式以及源码发现，一般都是把这类组件渲染到body里面，因此开始了重构之路。

首先不应该每次都要手动计算位置然后传入，应该是组件自己操作，而且应该想办法渲染到body上面，因此改造成下面这样

//引入方式改变
import Tooltip from 'somepath/Tooltip';
class BusinessComp extends React.component {
    render() {
        return (
            <div>
                <Tooltip content="我是tip" placement="left"><span>点击我弹出tip</span></Tooltip>
            </div>

        )
    }
}

//Tooltip
class Tooltip extends React.component {
    constructor(props) {
        super(props);
        this.state = {
            visible: !!props.visible
        }
        this.handleClick = this.handleClick.bind(this);
    }

    componentDidMount() {
        this.getContainer();//获取到需要插入进body的元素
    }

    getContainer() {
        this.getInstancePosition(); //计算tip的位置
        this.container = document.createElement('div');
        const parent = this.props.parentSelector;
        parent.appendChild(this.container); //插入container
        this.renderTip(this.props); //渲染tip
    }

   renderTip(props) {
        const {placement, title, content, style} = props;
        ReactDOM.unstable_renderSubtreeIntoContainer(this,
            <div className={`tooltip tooltip-${placement}`}
                style={assign({width: 300, opacity: 0, display: 'none'}, style)}
                ref={(c) => this.tipDom = c}>
                <div className="title">{title}</div>
                <div dangerouslySetInnerHTML={{__html: content}}></div>
            </div>, this.container
        )
    }

    handleClick() {
        this.setState({
            visible: !this.state.visible
        })
    }

    render() {
        const {children, placement, style} = this.props;
        const child = React.isValidElement(children) ? children : <span>{children}</span>; //判断是否为react element
        const newChildProps = {}; //绑定方法或添加其他属性, 如onClick/onMouseEnter等等
        newChildProps.onClick = this.handleClick;
        return React.cloneElement(child, newChildProps) //render中只需要渲染child
    }
}

export default function combineReducers(reducers) {
	
}

接收的reducers是一个对象，其key为控制state的key的命名，值为各个reducer函数。如调用combineReducers({ counter, todos })，state结果也就为{todos, counter}

刚开始会遍历这个对象，并清理掉值不是function的属性

  var reducerKeys = Object.keys(reducers)
  var finalReducers = {}
  for (var i = 0; i < reducerKeys.length; i++) {
    var 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]
    }
  }
  var finalReducerKeys = Object.keys(finalReducers)

return function combination(state = {}, action) {
	var hasChanged = false
    var nextState = {}
    for (var i = 0; i < finalReducerKeys.length; i++) {
      var key = finalReducerKeys[i]
      var reducer = finalReducers[key]
      var previousStateForKey = state[key]
      var nextStateForKey = reducer(previousStateForKey, action)
      if (typeof nextStateForKey === 'undefined') {
      var errorMessage = getUndefinedStateErrorMessage(key, action)
        throw new Error(errorMessage)
      }
      nextState[key] = nextStateForKey
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey
    }
    return hasChanged ? nextState : state
}

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

要答对上面的问题，就需要理解js本身的event loop。我们都知道js是单线程的，同一时间只能执行一个任务，那怎么才能做到异步的感觉呢。这就需要引入几个概念了，
task、microtask、macrotask。

所有同步任务都将在主线程上执行，形成一个task队列和microtask的队列，然后先将task按顺序压入执行栈执行，task队列清空后就将microtask压入执行栈执行，在一次event loop中都清空后，就会进行一次视图的渲染，然后执行macrotask。

microtask紧跟着task，一旦没有task压入执行栈，microtask就会被压入而执行。常见的microtask有process.nextTick、Promise、MutationObserver等。

那macrotask又是什么呢，它其实就是setTimeout以及node中的setImmediat的回调，它们都是创建一个异步任务，会在event loop的末尾才执行，它其实也属于一个task。至于它与microtask的区别就是microtask会影响IO回调，microtask不执行完的话，界面会一直卡住，macrotask就不会有这个问题。

回到最开始，我们看下那段代码的执行过程

1. 代码执行，同步代码全部放入在task或microtask中

   tasks: [concole.log, setTimeout cb, concole.log]
   stack: [console.log]
   microtask: [promise then]
   

2. task的代码依次执行，先打印出script start，然后在打印出script end，此时剩余一个macrotask和microtask

   tasks: [setTimeout cb]
   stack: [promise then]
   microtask: [promise then]
   

3. 然后promise执行，打印promise 1，然后接着另一个promise打印promise 2

   tasks: [setTimeout cb]
   stack: [setTimeout cb]
   microtask: []
   

4. 打印setTimeout，至此队列全部清空，一个event loop完成。

   tasks: []
   stack: []
   microtask: []
   

接着上面的知识，我们可以来看vue的nextTick方法了。在vue中，数据监测都是通过Object.defineProperty来重写里面的set和get方法实现的，vue更新DOM是异步的，每当观察到数据变化时，vue就开始一个队列，将同一事件循环内所有的数据变化缓存起来，等到下一次event loop，将会把队列清空，进行dom更新，内部使用的microtask MutationObserver来实现的。

虽然数据驱动建议避免直接操作dom，但有时也不得不需要这样的操作，这时就该Vue.nextTick(callback)出场了，它接受一个回调函数，在dom更新完成后，这个回调函数就会被调用。不管是vue.nextTick还是vue.prototype.$nextTick都是直接用的nextTick这个闭包函数

export const nextTick = (function () {
  const callbacks = []
  let pending = false
  let timerFunc

  function nextTickHandler () {
    pending = false
    const copies = callbacks.slice(0)
    callbacks.length = 0
    for (let i = 0; i < copies.length; i++) {
      copies[i]()
    }
  }
  
  //other code
})()

if (typeof Promise !== 'undefined' && isNative(Promise)) {
    var p = Promise.resolve()
    var logError = err => { console.error(err) }
    timerFunc = () => {
        p.then(nextTickHandler).catch(logError)
        if (isIOS) setTimeout(noop)
    }
} else if (typeof MutationObserver !== 'undefined' && (
    isNative(MutationObserver) ||
    MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
    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 {
	timeFunc = () => {
		setTimeout(nextTickHandle, 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
        })
    }
}

let request = new Request('/someurl', {
    method: 'GET', 
    mode: 'cors', 
    headers: new Headers({
        'Content-Type': 'application/json'
    })
});
fetch(request).then((response) => {
	//处理返回的数据
}).catch((err) => {
	//错误处理
})

//同样可以直接写成
fetch('someurl', {
    method: 'POST', 
    mode: 'cors', 
    body: JSON.stringify(jsonData);
    headers: new Headers({
        'Content-Type': 'application/json'
    })
}).then().catch()

关于Request的参数，这里挑几个重点说下

1. mode

   这个是设置跨域的参数，值为same-origin时，不允许跨域，它需要遵守同源策略。值为cors时，默认值，该模式支持跨域请求，顾名思义它是以CORS的形式跨域。值为no-cors时，该模式用于跨域请求但是服务器不带CORS响应头，也就是服务端不支持CORS，这也是fetch的特殊跨域请求方式，该模式允许浏览器发送本次跨域请求，但是不能访问响应返回的内容。

2. credentials

   fetch本身请求默认是不发送cookie的，需要带cookie就需要设置此参数。omit默认值，忽略传送cookie。same-origin表示cookie只允许同域传送，不允许跨域进行传送。include表示cookie都会被传送。

   fetch默认对服务端通过Set-Cookie头设置的cookie也会忽略，若想选择接受来自服务端的cookie信息，同样必须要配置credentials选项

Response介绍

response本身继承自Body，因此可以使用Body的方法，例如返回的是json对象，可以这样获取到返回结果

fetch(/someurl.json).then((response) => {
	if (response.status >= 200 && response.status < 300) {
		return response.json()
	}
}).then((data) => {

})

const fetchApi = (url, cfg = {}) => {
    return new Promise((resolve, reject) => {
        fetch(url, cfg).then((response) => {
            if (response.ok || response.status >= 200 && response.status < 300) {
                resolve(response.json())
            } else {
                throw response
            }
        }).catch((err) => {
            reject(err)
        })
    })
}

function timeout(ms = 5 * 60 * 1000) {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            reject({ok: false, text: 'timeout', title: '服务器超时！请重试！'});
        }, ms);
    });
}

const fetchApi = (url, cfg = {}) => {
    return new Promise((resolve, reject) => {
        Promise.race([fetch(url, cfg), timeout()]).then((response) => {
            if (response.ok || response.status >= 200 && response.status < 300) {
                resolve(response.json())
            } else {
                throw response
            }
        }).catch((err) => {
            reject(err)
        })
    })
}

const fetchApi = (url, cfg) => {
    retrun new Promise((resolve, reject) => {
        let abort = () => {
            reject({ok: false, text: 'abort', title: 'abort'});
        }

        let p = fetch(url, cfg).then((response) => {
            if (response.ok || response.status >= 200 && response.status < 300) {
                resolve(response.json())
            } else {
                throw response
            }
        }).catch((err) => {
            reject(err)
        })
        p.abort = abort
        return p
    })
}

|--src
	|--utils
	   |--warning.js
	|--applyMiddleware.js
	|--bindActionCreators.js
	|--combineReducers.js 
	|--compose.js //一个组合函数
	|--createStore.js  //store的创建，核心
	|--index.js //对外提供的接口

所有代码加起来粗略估算还不超过700行，可以看出redux的实现非常简介，其**有很多值得我们借鉴的地方。

首先来看最核心的createStore.js文件，它直接对外抛出了一个创建store的createStore函数供外部调用，其接收一个纯函数reducer，一个初始的state，以及一个可选的增强函数enhancer

export default function createStore(reducer, preloadedState, enhancer) {
	//code
}

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
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }
    
    var listeners = currentListeners = nextListeners
    for (var i = 0; i < listeners.length; i++) {
      listeners[i]()
    }
    return action
  }

export default function(state={}, action) {
	switch(action.type) {
		case 'A':
			return Object.assign({}, state, {a: 2})
		default:
			return state
	}
}

function subscribe(listener) {
    if (typeof listener !== 'function') {
      throw new Error('Expected listener to be a function.')
    }

    var isSubscribed = true

    ensureCanMutateNextListeners()
    nextListeners.push(listener)

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

      isSubscribed = false

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

return {
    dispatch, 
    subscribe, //订阅listener
    getState, //获取currenState
    replaceReducer,  //用新的reducer替换currentReducer
    [$$observable]: observable
}

//将当前version发布一个tag为beat的版本，version的修改为X.Y.Z-beat.1
npm publish --tag beat 

//安装此版本
npm i yournpm@beat

//测试完之后，修改版本号为X.Y.Z
npm publish

查看npm包的tag，可使用npm dist-tag命令

也可使用npm info命令查看该包的所有信息，包含了tag以及version

var CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin({
	name: 'commons'
});
module.exports = {
	entry: {
		//省略
	},
	output: {
		//省略
	},
	module: {
		rules: []
	},
	plugins: [CommonsChunkPlugin]
}

在静态html文件中除了将正常打包的文件bundler.js引入之外，还需要将commons.js引入(且须优先引入)，也可以用html-webpack-plugin插件自动引入

commonsChunk根据页面模块引入的不同，所产生的效果也不一样，下面将分情况进行说明

index1和index2中都引用了chunk1和chunk2以及vue、vue-router，chunk1中也引用了chunk2

1、单页应用(只有index1一个入口文件)

var webpack = require('webpack')
var path = require('path')

module.exports = {
	entry: {
		main: path.resolve(__dirname, 'src/index1.js')
	},
	output: {
		path: path.resolve(__dirname, 'dist'),
       filename: '[name].js'
	},
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules|vue\/dist/,
            loader: 'babel-loader'
        }]
    },
    resolve: {
        extensions: ['.js', '.vue']
    },
	plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'commons'
        })
    ]
}

var webpack = require('webpack')
var path = require('path')

module.exports = {
	entry: {
		main: path.resolve(__dirname, 'src/index1.js'),
		vendor: ['vue', 'vue-router']
	},
	output: {
		path: path.resolve(__dirname, 'dist'),
       filename: '[name].js'
	},
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules|vue\/dist/,
            loader: 'babel-loader'
        }]
    },
    resolve: {
        extensions: ['.js', '.vue']
    },
	plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
        })
    ]
}

var webpack = require('webpack')
var path = require('path')

module.exports = {
	entry: {
		main: path.resolve(__dirname, 'src/index1.js')
	},
	output: {
		path: path.resolve(__dirname, 'dist'),
       filename: '[name].js'
	},
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules|vue\/dist/,
            loader: 'babel-loader'
        }]
    },
    resolve: {
        extensions: ['.js', '.vue']
    },
	plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'commons',
            minChunks: 2
        })
    ]
}

var webpack = require('webpack')
var path = require('path')

module.exports = {
	entry: {
		main1: path.resolve(__dirname, 'src/index1.js'),
		main2: path.resolve(__dirname, 'src/index2.js'),
	},
	output: {
		path: path.resolve(__dirname, 'dist'),
       filename: '[name].js'
	},
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules|vue\/dist/,
            loader: 'babel-loader'
        }]
    },
    resolve: {
        extensions: ['.js', '.vue']
    },
	plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'commons',
            minChunks: 2
        })
    ]
}

var webpack = require('webpack')
var path = require('path')

module.exports = {
	entry: {
		main1: path.resolve(__dirname, 'src/index1.js'),
		main2: path.resolve(__dirname, 'src/index2.js'),
        vendor: ['vue', 'vue-router']
	},
	output: {
		path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
	},
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules|vue\/dist/,
            loader: 'babel-loader'
        }]
    },
    resolve: {
        extensions: ['.js', '.vue']
    },
	plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ['commons', 'vendor'],
            minChunks: 2
        })
    ]
}