webpack-dev-server无法导入静态文件

Question

静态文件（例如.svg，.png等）完全不会加载也不会引发错误。希望看到它们已加载。

[结构]

|--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

您需要使用CopyWebpackPlugin插件来复制静态资产，例如：

const CopyWebpackPlugin = require('copy-webpack-plugin');

plugins: [
  ...
  new CopyWebpackPlugin([
    { from: './app/images/*.*', to: 'assets/', flatten: true }
  ]),
  ...
]