html文件的Angular 6 Webpack 4构建问题404错误

Question

我正在尝试使用Angular 6配置Webpack 4，但是我无法弄清问题是什么？我无法设置相对路径。下面是我的应用程序结构，有人可以向我指出正确的方向。

Helper.js（用于解析路径）

var path = require('path');
var _root = path.resolve(__dirname);
console.log(path);
console.log(_root);
function root(args) {
    args = Array.prototype.slice.call(arguments, 0);
    return path.join.apply(path, [_root].concat(args));
}
exports.root = root;

webpack.config.js（配置文件，稍后将分为开发版和生产版）

var path = require('path');
var helpers = require('./helpers');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    devtool: 'source-map',
    entry: {
        'polyfills': path.join(__dirname, '/source/polyfills.ts'),
        'vendor': path.join(__dirname, '/source/vendor.ts'),
        'app': path.join(__dirname, '/source/main.ts')
    },
    output: {
        path: helpers.root('dist'),
        publicPath: 'http://localhost:8082/',
        filename: '[name].bundle.js',
        sourceMapFilename: '[file].map',
        chunkFilename: '[id].bundle.js'
    },
    externals: {
        "Microsoft": "Microsoft"
    },
    context: path.join(__dirname, 'source'),
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    "css-loader"
                ]
            },
            {
                test: /\.ts$/,
                loader: 'ts-loader!angular2-template-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|otf|eot|ico)$/,
                loader: 'file-loader?name=[path]/[name].[ext]'
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ]
    },
    resolve: {
        // options for resolving module requests
        // (does not apply to resolving to loaders)
        modules: ["node_modules", path.resolve(__dirname, "source")],
        // directories where to look for modules
        extensions: [".js", ".json", ".jsx", ".css", ".scss", ".less", ".html", ".ts"],
        // extensions that are used
        alias: {
            // a list of module name aliases
            "module": "new-module",
            // alias "module" -> "new-module" and "module/path/file" -> "new-module/path/file"
            "only-module$": "new-module",
            // alias "only-module" -> "new-module", but not "only-module/path/file" -> "new-module/path/file"
            "module": path.resolve(__dirname, "app/third/module.js"),
            // alias "module" -> "./app/third/module.js" and "module/file" results in error
            // modules aliases are imported relative to the current context
        },
        /* alternative alias syntax (click to show) */
        /* Advanced resolve configuration (click to show) */
    },
    resolveLoader: {
        modules: ['node_modules'],
        extensions: ['.js', '.json'],
        mainFields: ['loader', 'main']
    },
    plugins: [
        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)@angular/,
            path.resolve(__dirname, './source/app')
        ),
        new MiniCssExtractPlugin({
            filename: "[name].bundle.css",
            chunkFilename: "[id].css"
        }),
        new HtmlWebpackPlugin({
            template: path.join(__dirname, '/source/index.html')
        }),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery : 'jquery'
        })
    ]
}

错误