webpack-dev-server无法加载静态文件且无报错，寻求解决方案

Hey there, let's get those static assets loading properly—no errors, just working images. Looking at your project structure and webpack config, here are the exact changes you need to make:

1. Tweak Your file-loader Configuration #

Right now, your file-loader rule doesn't specify where to output or how to name assets, which leads to path confusion in dev mode. Update it with clear settings:

{
  test: /\.(png|jpe?g|gif|svg)$/i,
  loader: "file-loader",
  options: {
    // Keep filenames recognizable with a hash for cache busting
    name: "[name].[hash:8].[ext]",
    // Send assets to a dedicated 'assets' folder (works in dev memory too)
    outputPath: "assets/",
    // Match webpack's root path to ensure URLs resolve correctly
    publicPath: "/"
  }
}

This tells webpack exactly where to place your assets and how to reference them in the compiled code.

2. Make vue-loader Parse Template Asset Paths #

When you use aliases like @renderer in Vue templates (especially in <object> tags), vue-loader needs explicit instructions to process the data attribute as an asset path. Update your .vue loader rule:

{
  test: /\.vue$/,
  loader: "vue-loader",
  exclude: /node_modules/,
  options: {
    transformAssetUrls: {
      // Tell vue-loader to handle the 'data' attribute on <object> tags
      object: "data",
      // Keep default handling for other common asset tags
      img: "src",
      image: "xlink:href"
    }
  }
}

This is a critical step—without it, Vue will leave the @renderer/assets/example.svg path as a raw string, which the browser can't find because webpack never processes it.

3. Simplify output.publicPath (Optional but Smarter) #

Your current publicPath uses an absolute URL (http://localhost:8080/), which works but isn't flexible. Switch to a relative root path for dev mode:

output: {
  path: path.resolve(__dirname, "..", "dist"),
  publicPath: "/", // Uses the dev server's root path
  filename: "bundle.js",
},

This ensures assets load correctly even if you access the dev server from a different hostname or port later.

4. Test the Template Path (Quick Debug) #

If you want to confirm the path is resolving, try using a dynamic require() in your Vue template to force webpack to process the asset:

<template>
  <!-- Original approach (should work after above fixes) -->
  <object type="image/svg+xml" data="@renderer/assets/example.svg"></object>
  
  <!-- Debug version: Explicitly require the asset -->
  <object type="image/svg+xml" :data="require('@renderer/assets/example.svg')"></object>
</template>

The dynamic binding with require() will immediately tell you if webpack can find the asset.

Why This Works #

• file-loader options: Creates predictable paths for assets, so webpack can serve them from memory (in dev) or write them to disk (in build).
• vue-loader transformAssetUrls: Triggers webpack's asset pipeline for the <object> tag's data attribute, converting your alias path into a valid URL.
• publicPath alignment: Keeps asset URLs in sync with where the dev server is serving files, eliminating 404 errors.

After making these changes, restart your webpack-dev-server, and your SVG/PNG files should load without a hitch.

内容的提问来源于stack exchange，提问作者Sombian