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

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 添加 URL 前缀和 css 导入？

How to add URL prefix to js and css imports in index.html with webpack?

webpack

html-webpack-plugin