在我们学习微前端前，是要做一定的知识储备的，概念 和 代码 结合在一起，才能保证我们完全去理解到一种思想或者一种技术的真正意义。

这一章节最主要是要告诉大家在基于single-spa 学习微前端的时候，需要掌握哪些基础知识，通过了解到这些知识后，我们学起来single-spa 也会快一些，single-spa 学的快了，我们了解微前端的概念也就会要快很多

# js相关

这个就不多说了，前端必备知识基础

# webpack 基础

webpack 其实也是必备的知识点了，如果你使用了官方提供的create-single-spa的包，则不需要手动配置，如果你是基于现有的项目基础上去做的重构，则还是自己手动配置一下会更加安全一些：

• 将 single-spa 输出的目标设置为system

// webpack.config.js
{
  output: {
    libraryTarget: 'system'
  }
}

设置该属性的目的，是由于single-spa的部分功能是基于 systemjs 实现的，所以要保证输出的正确使用

• 动态导入模块，不要使用 Optimization

{
  entry: {
  	index: './src/index.js'
  }
}

设置单一的入口，通过import()语法动态导入每一个子应用，single-spa 官方的理念就是 “一个子应用是一个动态导入的模块”：

// before
import $ from 'jquery'

function myComponent() {
  $('#app').append('<div></div>')
}

// after
function myComponent() {
  import('jquery').then(({default: $}) => {
  	$('#app').append('<div></div>')
  })
}

这个就不做太多详解了，webpack官方有详细的解释，就是告诉大家要这么做，理解了即可；

• 针对webpack的systemjs配置

其中一项配置在上面已经说到了，就是设置libraryTarget，另一项就