微前端子应用改造

子应用需要新增生命周期函数，
webpack配置文件，需要输出 umd打包格式，方便 get请求

生命周期

入口文件，新增生命周期方法，index.js

/**
 * 修改子应用的入口文件，新增 render函数
 */
function render() {}
// 如果不在微前端环境下
if(!window.__MICRO_APP__) {
  render()
}
export function bootstrap() {
  console.log('bootstrap 开始加载')
}
export function mount(store, props) {
  render()
  console.log('bootstrap 渲染成功')
}
export function unmount() {
  console.log('bootstrap 卸载子组件')
}

webpack.config.js

webpack.config.js

const path = require('path');
const pkg = require('./package.json');
module.exports = {
  output: {
    // resolve 绝对路径，join 相对路径
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js', //`${pkg.name}.js`,
    library: pkg.name,
    libraryTarget: 'umd',
    umdNamedDefine: true,
    publicPath: 'http://localhost:8081'
  },
  devServer: {
    compress: true,
    contentBase: path.join(__dirname, 'build'),
    port: 8081,
    // 允许跨域访问
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE',
      'Access-Control-Allow-Headers': 'Content-Type'
    },
    historyApiFallback: true,
    hot: ture,
  },
}