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

的捆绑路径。

该应用程序在测试/产品环境中工作，因为在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无法按预期工作

1 个答案: