如何从 html-webpack-plugin 生成的 index.html 中排除 bundle.css？

Question

我只想对我的 js 块使用 html-webpack-plugin 。 Bundle.css 由 extract-text-plugin 生成：

new ExtractTextPlugin({filename: 'bundle.css, allChunks: true})

HtmlWebpackPlugin 选项：

new HtmlWebpackPlugin({template: 'template/tpl.html', inject: true})

我的 tpl.html 看起来像这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Cash Management</title>
    <link href="getResource?resource=build/bundle.css&mediaType=text/css" rel="stylesheet">
</head>
<body>
<div id='root' />
</body>

</html>

我想在我的 index.html:

中看到类似的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Cash Management</title>
    <link href="getResource?moduleName=cm-ui&resource=build/bundle.css&mediaType=text/css" rel="stylesheet">
</head>
<body>
<div id='root' />
</body>
  <script href="getResource?moduleName=cm-ui&resource=build/common.js" type="text/javascript"></script>
  <script href="getResource?moduleName=cm-ui&resource=build/bundle.js" type="text/javascript"></script>
</html>

有人能给我指出正确的方向吗？

Answer 1

您可以使用html-webpack-exclude-assets-plugin

有了它，您可以排除阻止自动粘贴的资产。您还可以使用 lodash 语法插入模板路径。

<link href="getResource?resource=<%= htmlWebpackPlugin.files.css[0] %>&mediaType=text/css" rel="stylesheet">

如何从 html-webpack-plugin 生成的 index.html 中排除 bundle.css？

How to exclude bundle.css from index.html generated by html-webpack-plugin?

html

javascript

reactjs

webpack

html-webpack-plugin