一般来说我们的主应用和子应用是分各自的项目进行开发,代码存在自己的仓库里面。主应用和子应用有可能用同样的技术栈,库js都差不多,那么公共js资源的共享现在没有现成的方案。这里分享一个最简单的方案。

  1. 通过autodll-webpack-plugin插件,在主项目把需要共享的库打包成一个dll.js
  2. 通过autodll-window-webpack-plugin插件,把打包的库绑定到window上
  3. 将主项目打包出来的dll.js的路径,写到子项目的html内
  4. 配置子项目的externals
// 主项目
yarn add autodll-webpack-plugin -D
yarn add autodll-window-webpack-plugin -D
// 主项目
const AutoDllPlugin = require('autodll-webpack-plugin');
const AutoDllWindowWPlugin = require('autodll-window-webpack-plugin');

new AutoDllPlugin({
  inject: true,
  filename: '[name].js',
  path: './dll',
  debug: false,
  entry: {
    vendor: ['vue', 'vue-router', 'vuex'],
  },
  plugins: [new AutoDllWindowWPlugin()],
})

子项目的配置方法就很简单了,自行百度吧


老熊
7 声望0 粉丝