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

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 Config是使用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

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