htmlWebPack 插件 publicPath 未按预期工作答案

【问题标题】：htmlWebPack plugin publicPath not working as expectedhtmlWebPack 插件 publicPath 未按预期工作
【发布时间】：2020-01-08 08:12:48
【问题描述】：

我的 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 文件。

我在配置中缺少什么？

【问题讨论】：

你试过用resolve而不是join

标签： javascript webpack webpack-2 html-webpack-plugin webpack-splitchunks

【解决方案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/'),
}

【讨论】：