HTML WebPack插件的publicPath不按预期工作。

Question

我的webpack输出：

output: {
    publicPath: path.join(basename, '/assets/'),
    path: `${__dirname}/built/core/assets/`,
    filename: '[name].[chunkhash].js',
},

index.html 模板:

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script charset="utf-8" src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>

现在的问题是当publicPath设置为path.join(basename, '/assets')时，index.html会被解析为：

<script charset="utf-8" src="\assets/bundle.d121bf175aece5f14af6.js"></script>

这是可以的，但是因为我在公共路径中没有添加尾随斜杠，所以在bundle.[hash].js文件和块中会出现问题。

script.src = __webpack_require__.p + "" + chunkId + "." + {"0":"24692a7f9ff51c72880c...
...
__webpack_require__.p = "\\assets";

当没有斜杠时，资源被解析为assets[id].[hash].js，并且找不到它们。但是，如果我在publicPath（path.join(basename，'/assets /')）后面添加逗号，则index.html将被解析为

<script charset="utf-8" src="\assets\/bundle.d121bf175aece5f14af6.js"></script>

如果未找到bundle.[hash].js文件，则在配置中缺少什么？

- Simas.B

---

你试过使用resolve而不是join吗？ - Callum Linington

Answer 1

在Windows环境中，path.join(basename, '/assets/') -> '\assets'

然后html-webpack-plugin会检查publicPath末尾是否有斜杠，如果没有，则会添加一个，这将导致bundle路径为src="\assets\\/bundle.[hash].js".master 该应用程序在测试/生产环境中正常工作，因为在Unix / macOS环境中，path.join(basename, '/assets/') -> '/assets/'

添加了webpack配置检查，从而解决了问题。

const environment = process.env.NODE_ENV || 'development';
const isDevelopment = environment === 'development';
...
output: {
    publicPath: isDevelopment ? '/assets/' : path.join(basename, '/assets/'),
}

- Simas.B