时间戳

首页 > 解决方案 > Webpack：排除某些 svg 文件被打包到 app.js 中

webpack - Webpack：排除某些 svg 文件被打包到 app.js 中

问题描述

我有一个使用 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 目录加载的。

标签： webpack

解决方案

我不得不为 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 上工作时，我的包含/排除路径包含反斜杠 - 它不适用于正斜杠，因为正则表达式与光盘上的路径进行比较。

推荐阅读