浅谈webpack下的AOP式无侵入注入

var baseConf = {
// code here
entry: {
index: 'src/index',
list: 'src/list',
detail: 'src/detail',
// and so on ...
},
// code here
}

import Vue from 'vue'
import App from './app'
new Vue({
el: '#app',
render: h => h(App)
})

import Vue from 'vue'
Vue.use(performance) //性能统计
import App from './app'
new Vue({
el: '#app',
render: h => h(App)
})

resolve: {
alias: {
'vue$': resolve('src/vueHook.js')
}

import vue from 'vue/dist/vue.common'
vue.use(performance)
export default vue

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>)

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 "htmlcode">

export default (
<Bundle
load={() => import(/* webpackChunkName: "widget" */
`../../component-modules/magic-single-image/src/index`
)}
>
{Widget => <Widget {...props} />}
</Bundle>
)


思考，当组件多的时候每一个模块都需要一个人口点吗，可以从webpack.context角度简化这个问题吗？
以上两个例子均是模块引用作为join point来进行注入操作的，而且完成了无侵入式的功能增强，这得益于webpack将js模块作为一等公民。我们拥有着超多的权利完成静态式的注入工作。 本文并没有在技术上涉及太多，还是那句话，抛砖引玉哈~~~
以上这篇浅谈webpack下的AOP式无侵入注入就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。