是否有插件将指定的包捆绑到用作运行时的供应商文件中？

Question

为什么我需要这个？

例如，我想在我的网络包项目中使用vue，vuex，vue-router和jquery作为外部，因此提高速度并避免不必要的浪费。

为什么不使用外部选项

因为在我的html文件中需要四个<script>标记。但我想将它们捆绑到一个文件中。

我当前的解决方案

单独捆绑文件，其内容为：

if (window) {
  window.Vue =  require('vue/dist/vue.runtime.common.js')
  window.Vuex = require('vuex/dist/vuex.js')
  window.$ = require('jquery')
  window.VueRouter = require('vue-router/dist/vue-router.common.js')
}

假设输出文件名为vendor.xxxx.js，我手动将<script type="text/javascript" src="/vendor.xxxx.js"></script>添加到我的html模板。

端

这解决了这个问题。但我不知道是否已经有一个插件来处理这个问题。还是有更好的方法吗？

Answer 1

在webpack中，您可以使用expose-loader公开当前范围库，对象等。

在配置文件中，您可以添加此

module: {
  rules: [
   {
     test: require.resolve('vue'),
     use: [
      {
        loader: 'expose-loader',
        options: 'Vue'
      }
     ]
   },
   {
     test: require.resolve('vuex'),
     use: [
      {
        loader: 'expose-loader',
        options: 'Vuex'
      }
     ]
   }
  ]
}

考虑到您正在创建Web应用程序，范围将为window。我希望它有所帮助