javascript - 是什么导致我的 SVG 文件被 Webpack 分块？

我正在使用 VueJS，并且在我 scoped 的 SCSS 中，我有一个指向 SVG 文件的背景图片，这个工作得很好……但是当我尝试使用像 file-loader/url-loader/svg-url-loader 这样的加载器来配置输出时，它被分块了，无法被读取。我完全不知道是什么导致了这个冲突。

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

  mode: 'development',

  entry: {
    main: path.resolve(__dirname, 'src/index.ts'),
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js',
    publicPath: '/assets/',
  },

  devServer: {
    host: '0.0.0.0',
    static: path.join(__dirname, 'dist'),
    compress: false,
    port: 7000,
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
        },
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
      {
        test: /\.svg$/,
        exclude: /node_modules/,
        use: {
          loader: 'svg-url-loader',
        },
      },
    ],
  },

  plugins: [

    new MiniCssExtractPlugin({
      filename: 'assets/css/[name].css',
      chunkFilename: '[id].css',
    }),

    new VueLoaderPlugin(),

    new HtmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'),
      filename: path.join(__dirname, './dist/index.html'),
      minify: false,
    }),

  ],

  devtool: 'source-map',

  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.vue'],
  },

};

分块输出类似于：module.exports="data:image/svg+xml,blahblahblah"

答案＃1

我自己弄明白了，通过升级我所有的 NPM 包并使用 Webpack 的资源模块代替以前的任何加载器，它完美运行。