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 文件， block 中向公共(public)路径添加尾部斜杠

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

的包路径

应用程序在测试/生产环境中工作，因为在 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/'),
}