Question

我有一个webpack应用程序，它将角度代码捆绑到一个文件夹中：

|
|-index.html
|-polyfills.js
|-vendor.js
|-app.js

使用webpack-dev-server运行应用程序是可行的。如果我将其部署到本地IIS并通过http://localhost调用，也是如此。当该应用程序放置在IIS根目录下的文件夹中时，就会出现问题。因此，如果使用http://localhost/myApp/调用应用程序，则它将为所有资产返回404。（GET http://localhost/polyfills.js 404 (Not Found)）

首先，我在index.html中检查了生成的html输出：

<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="app.js"></script>

由于HTML和脚本位于相同的相对路径上，因此应该是正确的。

此后，我将output.publicPath更改为"/"，因此现在配置和生成的HTML看起来像这样：

output: {
        path: helpers.root('./dist'),
        filename: '[name].js',
        chunkFilename: '[id].chunk.js',
        publicPath: "/"
    },

<script type="text/javascript" src="/polyfills.js"></script>

这什么都没改变。

我无法控制此小型应用程序的部署位置以及调用方式，因此，无论它们实际位于Web应用程序的根文件夹还是子文件夹中，我都需要确保所有文件都正确加载。为了实现此目的，我需要在webpack.config.js中进行哪些更改？

修改如评论中所要求的，这是生成的index.html：

<!DOCTYPE html>
<html>

    <head>

        <base href="/">
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

    <body>
        <div class="container-fluid fill">
            <div class="row ml-0 mr-0 fill">
                <div class="col pl-0 pr-0">
                    <my-app>The application is starting up...</my-app>
                </div>
            </div>

        </div>
    <script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="app.js"></script>
    </body>
</html>

当应用程序在虚拟文件夹中运行时，Webpack不会加载脚本

0 个答案: