javascript - htmlWebPack 插件 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 文件。

我在配置中缺少什么？

Answer 1

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

然后 html-webpack-plugin 将检查 publicPath 的末尾是否有正斜杠，如果没有，它将添加它，这反过来将解析为捆绑路径src="\assets\\/bundle.[hash].js".master

该应用程序在 test / prod 环境中工作，因为在 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/'),
}