Question

我在开发期间有一个显示在我的Angular应用程序主页面上的图像，但是当我进行生产发布时，图像不会显示。我一直在关注其他讨论（this one看起来很有希望，但没有解决我的问题），但仍然无法解决问题。我有什么想法我做错了吗？

我的图片标记如下所示：

someMethod

在制作中，它输出：

<img alt="Rocket" src="../../images/rocket.gif" />

我确实在我的dist文件夹中查看了该文件确实存在，但似乎已损坏。那里有另一个文件，5743b3dcb9db968dd0e484850845aa54.gif，其中包含我的图像。不确定是否提供了提示。

我的webpack.config.js文件如下所示：

<img alt="Rocket" src="dist/0f686f4440348c6e453c282baa10b674.gif">

我的webpack.config.vendor.js文件如下所示：

const path = require("path");
const webpack = require("webpack");
const merge = require("webpack-merge");
const AngularCompilerPlugin = require("@ngtools/webpack").AngularCompilerPlugin;
const CheckerPlugin = require("awesome-typescript-loader").CheckerPlugin;

module.exports = (env) => {
    // Configuration in common to both client-side and server-side bundles
    const isDevBuild = !(env && env.prod);
    //const isDevBuild = false;
    const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
        resolve: {
            extensions: [".ts", ".js"],
            "alias": {
                "jquery-ui":"jquery-ui-dist/jquery-ui",
                "scripts": path.resolve(__dirname, "./ClientApp/scripts"),
                "node_modules": path.resolve(__dirname,"./node_modules")
            }
        },
        output: {
            filename: "[name].js",
            publicPath: "dist/" // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /\.ts$/, include: /ClientApp/, use: ["awesome-typescript-loader?silent=true", "angular2-template-loader", "angular-router-loader"] },
                { test: /\.html$/, use: "html-loader?minimize=false" },
                { test: /\.scss$/, include: /ClientApp/, use: ["raw-loader", "sass-loader"] },
                { test: /\.css$/, use: ["to-string-loader", isDevBuild ? "css-loader" : "css-loader?minimize"] },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: "url-loader?limit=25000" }
            ]
        },
        plugins: [
            new CheckerPlugin(),
            new webpack.ProvidePlugin({
                jQuery: "jquery",
                $: "jquery",
                jquery: "jquery",
                "window.jQuery": "jquery'",
                "window.$": "jquery"
            })]
    };

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = "./wwwroot/dist";
    const clientBundleConfig = merge(sharedConfig, {
        entry: { "main-client": "./ClientApp/boot.browser.ts" },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require("./wwwroot/dist/vendor-manifest.json")
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: "[file].map", // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, "[resourcePath]") // Point sourcemap entries to the original file locations on disk
            })
        ] : [
                // Plugins that apply in production builds only
                new webpack.optimize.UglifyJsPlugin(),
                //new AotPlugin({
                new AngularCompilerPlugin({
                    tsConfigPath: "./tsconfig.json",
                    entryModule: path.join(__dirname, "ClientApp/app/app.module.browser#AppModule"),
                    exclude: ["./**/*.server.ts"]
                })
            ])
    });

    // Configuration for server-side (prerendering) bundle suitable for running in Node
    const serverBundleConfig = merge(sharedConfig, {
        resolve: { mainFields: ["main"] },
        entry: { "main-server": "./ClientApp/boot.server.ts" },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require("./ClientApp/dist/vendor-manifest.json"),
                sourceType: "commonjs2",
                name: "./vendor"
            })
        ].concat(isDevBuild ? [] : [
            // Plugins that apply in production builds only
            //new AotPlugin({
            new AngularCompilerPlugin({
                tsConfigPath: "./tsconfig.json",
                entryModule: path.join(__dirname, "ClientApp/app/app.module.server#AppModule"),
                exclude: ["./**/*.browser.ts"]
            })
        ]),
        output: {
            libraryTarget: "commonjs",
            path: path.join(__dirname, "./ClientApp/dist")
        },
        target: "node",
        devtool: "inline-source-map"
    });

    return [clientBundleConfig, serverBundleConfig];
};

Answer 1

我已经解决了这个问题。事实证明，我需要将图像的引用添加到webpack.config.vendor.js文件中的非树可摇动部分。

我添加了以下行，修复了组件html页面中的引用，并且它们都在一个已发布的应用程序中工作！真棒！

"./ClientApp/images/rocket.gif"

无法使用WebPack在Angular 5中的生产版本中显示图像

1 个答案: