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>

没关系，但是因为我没有在 public 路径中添加尾部斜杠，在 bundle.[hash].js 文件中，chunks

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 的末尾，如果有 none 它会依次添加它将解决捆绑路径 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/'),
}

htmlWebPack 插件 publicPath 没有按预期工作

htmlWebPack plugin publicPath not working as expected

javascript

webpack

html-webpack-plugin

webpack-2

webpack-splitchunks