resolve: {
alias: {
'vue$': resolve('src/vueHook.js')
}
src/vueHook.js
import vue from 'vue/dist/vue.common' vue.use(performance) export default vue
这样，我们就完成了一个vue的全局钩子模块，我们按照步骤归纳，并且找到注入的位置 ，最后利用替换的方式成功的完成了无侵入式的组件应用
code spliting
可能上面的例子有点小打小闹的感觉，那么我们换一个案例，再来体验一下这种静态替换式的注入的威力，我们采用官方支持较差的react作为参考(vue在code spliting方面做得真心是超级棒~)
import SingleImage from '../../component-modules/magic-single-image/src/index';
import DoubleImage from '../../component-modules/magic-double-image/src/index';
import ThreeImage from '../../component-modules/magic-three-image/src/index';
// many component here
switch (componentName) {
case 'SingleImage':
PreviewingComponent = SingleImage;
break;
case 'DoubleImage':
PreviewingComponent = DoubleImage;
break;
case 'ThreeImage':
PreviewingComponent = ThreeImage;
break;
// many component here
}
return(<PreviewingComponent></PreviewingComponent>)
一段中规中矩的代码，对吧？相信大家已经发现了，在上述的代码里面似乎并不是每个组件都是必须的，那么，基于以上的思考，可以对上面组件进行按需加载处理。 Bundle.jsx
import React, { Component, PropTypes } from 'react';
class Bundle extends Component {
static propTypes = {
load: PropTypes.func,
children: PropTypes.func,
}
state = {
mod: null,
}
componentWillMount() {
this.load(this.props);
}
componentWillReceiveProps(nextProps) {
if (nextProps.load !== this.props.load) {
this.load(nextProps);
}
}
load(props) {
this.setState({
mod: null,
});
props.load().then((mod) => {
this.setState({
// handle both es imports and cjs
mod: mod.default ? mod.default : mod,
});
});
}
render() {
return this.state.mod ? this.props.children(this.state.mod) : null;
}
}
export default Bundle;
以及相应的alias hook
export default (
<Bundle
load={() => import(/* webpackChunkName: "widget" */
`../../component-modules/magic-single-image/src/index`
)}
>
{Widget => <Widget {...props} />}
</Bundle>
)
思考，当组件多的时候每一个模块都需要一个人口点吗，可以从webpack.context角度简化这个问题吗？
以上两个例子均是模块引用作为join point来进行注入操作的，而且完成了无侵入式的功能增强，这得益于webpack将js模块作为一等公民。我们拥有着超多的权利完成静态式的注入工作。 本文并没有在技术上涉及太多，还是那句话，抛砖引玉哈~~~