Question

我正在使用Tomcat为我编译的应用程序提供服务。该应用程序不是从根上下文提供的，而是带有后缀 - 例如mysite.com/myapp。

我需要webpack将此myapp前缀添加到js中的css和index.html导入。

我需要这个：

<html>
<head>
  <link rel="shortcut icon" href="/myapp/favicon.ico">
  <link href="/myapp/app.9c885d75239355add0ca8f22362e289c.css" rel="stylesheet">
</head>
<body>
  <div id="root"></div>
  <script src="/myapp/vendor.1c28bcf2a2efacc7d62d.js"></script>
  <script src="/myapp/app.d678b996583f01bd2f7d.js"></script>
</body>
</html>

但是现在我有了这个：

<html>
<head>
  <link rel="shortcut icon" href="favicon.ico">
  <link href="app.9c885d75239355add0ca8f22362e289c.css" rel="stylesheet">
</head>
<body>
  <div id="root"></div>
  <script src="vendor.1c28bcf2a2efacc7d62d.js"></script>
  <script src="app.d678b996583f01bd2f7d.js"></script>
</body>
</html>

一种hacky方式是在构建期间运行脚本来更改链接，但我希望有一个更合适的webpack解决方案。

我正在使用HtmlWebpackPlugin和React Redux Starter Kit。

Answer 1

集

output: {
  filename: '/myapp/[name].[chunkhash].js',
  ...
},

Answer 2

我想我们也可以使用Webpack publicPath

output: {
  publicPath: '/myapp/',
  ...
},

如何使用webpack为index.html中的js和css导入添加URL前缀？

2 个答案: