Question

我有一个使用Webpack构建的Vue.js应用程序。我添加了一个包含数百个SVG标志的库。 scss文件很小-标记是文件夹中单独的SVG文件。在构建时，Webpack将所有编码为base64的SVG文件放入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进行引用

Answer 2

我必须为flags目录添加一些例外：

配置中的原始行：

  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    },
  }

修改的配置行：

  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    },
    exclude: [
        /\\node_modules\\flag-icon-css\\.*\.svg([\?\#].*)?$/,
    ]
  }, 
  {
    test: /\.(svg)(\?.*)?$/,
    loader: 'file-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/flags/[name].[ext]')
    },
    include: [
        /\\node_modules\\flag-icon-css\\.*\.(svg)(\?.*)?$/,
    ]
  },

现在，所有SVG文件均按以前的方式处理-除标志外。它们是从img/flags/加载的。这些文件将被自动复制到构建版本中的该文件夹中，并从那里提供服务。

需要注意的一件有趣的事情：当我在Windows上工作时，我的包含/排除路径包含反斜杠-它不适用于正斜杠，因为正则表达式与光盘上的路径相比。

Webpack：将某些svg文件打包到app.js中

2 个答案: