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

问题描述

我正在使用 VueJS，在我的作用域 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"

标签： javascripttypescriptvue.jssvgwebpack

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

问题描述

解决方案

推荐阅读