webpack-dev-server unable to import static files - webpack-dev-server

Question

static files (such as .svg, .png and so on) won't load nor throw error at all.
would like to see them loaded.
[structure]
|--src
| |--modules
| | |--example.ts
| |--renderer
| | |--assets
| | | |--example.svg
| | |--app.ts
| | |--app.vue
| | |--app.scss
| | |--index.ts
| |--resources
| | |--example.json
| |--index.html
|--package.json
|--webpack
| |--webpack.config.js
| |--serve.js
| |--build.js
[app.vue]
<template>
<object type="image/svg+xml" data="#renderer/assets/example.svg"></object>
</template>
[webpack.config.js]
const path = require("path");
const webpack = require("webpack");
const vue_loader_plugin = require("vue-loader/lib/plugin");
const html_webpack_plugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/renderer/index.ts",
stats: "errors-only",
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"]
},
exclude: /node_modules/
},
{
test: /\.ts$/,
loader: "ts-loader",
options: {
appendTsSuffixTo: [/\.vue$/]
},
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: "vue-loader",
exclude: /node_modules/
},
{
test: /\.scss$/,
loader: ["vue-style-loader", "css-loader", "sass-loader"]
},
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: "file-loader",
}
]
},
output: {
path: path.resolve(__dirname, "..", "dist"),
publicPath: "http://localhost:8080/",
filename: "bundle.js",
},
resolve: {
extensions: [".js", ".ts", ".vue", ".scss", ".json"],
alias: {
"#modules": path.resolve(__dirname, "..", "src", "modules"),
"#renderer": path.resolve(__dirname, "..", "src", "renderer"),
"#resources": path.resolve(__dirname, "..", "src", "resources")
}
},
plugins: [
new html_webpack_plugin({
template: "./src/index.html"
}),
new vue_loader_plugin(),
new webpack.HotModuleReplacementPlugin()
]
};

Answer 1

You need to use CopyWebpackPlugin plugin to copy static assets, like:
const CopyWebpackPlugin = require('copy-webpack-plugin');
plugins: [
...
new CopyWebpackPlugin([
{ from: './images/*.*', to: 'assets/', flatten: true }
]),
...
]