WebpackDevserve 仅适用于站点的 rootUrl

Question

我有一个测试站点，我可以在其中进行测试 Webpack 与 AngularJS 结合使用。在我开始学习路由之前一切都很好。

这是我的 webpack 配置

'use strict';
const webpack = require('webpack');
const fs = require('fs');
const path = require('path');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');



const minimizerBlock = {
    minimizer: [
        new UglifyJsPlugin({
            uglifyOptions: {
                warnings: false,
                parse: {},
                compress: {},
                mangle: true,
                output: null,
                toplevel: false,
                nameCache: null,
                ie8: false,
                keep_fnames: false,
            },
        }),
        new OptimizeCSSAssetsPlugin({})
    ]
}

const config = {
    entry: { main: './frontend/src/index.js' },
    output: {
        path: path.resolve(__dirname, './public'),
        filename: 'main.js',
        publicPath: '/'
    },
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        port: 80,
        overlay: true,
        proxy: {
            '*': 'http://localhost:8888'
        }
    },
    module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } },
            { test: /\.less$/, use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"] },
            { test: /\.scss$/, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"] },
            { test: /\.sass$/, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"] },
            { test: /(\.css$)/, loaders: ['style-loader', 'css-loader'] },
            {
                test: /\.(png|jpg|jpeg|svg|gif|webp)$/,
                include: [
                    path.resolve(__dirname, './frontend/image/')
                ],
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]',
                    }
                }]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                include: [
                    path.resolve(__dirname, './frontend/fonts/')
                ],
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]',
                    }
                }]
            },
            {
                test: /\.(mp3)$/,
                include: [
                    path.resolve(__dirname, './frontend/audio/')
                ],
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]',
                    }
                }]
            },
            {
                test: /\.(html)$/,
                include: [
                    path.resolve(__dirname, './frontend/pages/')
                ],
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[ext]',
                        }
                    },
                    {
                        loader: 'extract-loader'
                    },
                    {
                        loader: 'html-loader',
                        options: {
                            interpolate: true,
                        }
                    }
                ],
                exclude: [
                    path.resolve(__dirname, 'frontend/src/', 'template.html')
                ]
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: './index.css',
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'frontend/src/', 'template.html'),
            filename: 'index.html',
            inject: true,
            favicon: 'frontend/image/icons/iconfinder_tech_0001_4023871.png'
        })

    ]
};
module.exports = (env, options) => {
    let production = options.mode == 'production';
    config.devtool = production ? false : 'inline-cheap-module-source-map';
    config.optimization = production ? minimizerBlock : {};
    return config;
}

一切都如我所愿，但在我对代码进行了更改之后，或者更确切地说，我为一个运行良好的网站编写了 AngularJs 路由配置。

import app from '../module/main-module.js';
import importFiles from '../getFiles.js';



app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {
                templateUrl: importFiles.pages[3],
            })
            .when('/my-works', {
                templateUrl: importFiles.pages[4],
            })
            .when('/interesting-topics', {
                templateUrl: importFiles.pages[2],
            })
            .when('/about-me', {
                templateUrl: importFiles.pages[0],
            })
            .when('/contact-me', {
                templateUrl: importFiles.pages[1],
            }).otherwise({
                redirectTo: '/',
            });
            $locationProvider.html5Mode({
              enabled: true,
              requireBase: false
        });
    }]);

当我在根 页面 http://localhost 页面中时，一切正常。

当我开始点击链接时，一切正常，当我不在站点的根目录并重新加载页面时，问题就开始了。我丢失了所有内容。

这是网站在重新加载页面之前的样子。

这是重新加载页面后网站的样子。

我只有在网站以开发模式启动时才会出现此问题，当缺少公用文件夹时，如果您以生产模式启动它，则创建公用文件夹，这不是问题。

即使我不删除公用文件夹并以开发模式运行项目，问题也丢失了。

如何正确配置以纠正错误？

我的意见是我没有正确配置 webDevServer。但是我自己也搞不明白，虽然学了两周AngularJs也不是很懂，可能是ngRoute的配置有问题

Answer 1

事实证明，这种行为的原因是配置，而不是其中的设置

$locationProvider.html5Mode({
  enabled: false,
  requireBase: false
});

我试图清除来自#的线路

http://localhost/#!/interesting-topics

http://localhost/interesting-topics

而现在我不知道怎么设置，这样问题中就没有上面描述的问题，而且有一条没有#的路径