Webpack:从打包到 app.js 中排除某些 svg 文件

Question

我有一个使用 Webpack 构建的 Vue.js 应用程序。我添加了一个包含数百个 SVG 标志的库。 scss 文件非常小 - 标志是文件夹中的单独 SVG 文件。当我构建时，Webpack 将所有 SVG 文件 base64 编码到 app.js 中。在这种特殊情况下，这会适得其反，因为它不必要地扩大了我的应用程序的大小。我宁愿按需从 SVG 文件夹加载标志，以保持我的应用程序小。

在 App.vue

<style lang="scss">
  @import '~flag-icon-css/sass/flag-icon.scss';
</style>

我的 Webpack 配置是用 vue-cli 创建的。它来自这里:
https://github.com/coreui/coreui-free-vue-admin-template/blob/v1/Vue_Starter/build/webpack.base.conf.js

构建在 img 路径中​​包含 Flag-SVG 文件 - 所以这很好。
但是 Flag-SVG 是作为数据从 webpack 加载的，而不是直接从 img 目录加载的。

Answer 1

您应该将这些 SVG 文件移动到 ./static文件夹 - 因此它们不会包含在捆绑包中，而是直接复制到 ./dist文件夹，您必须使用绝对 URL 来引用它们。