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

Posted

技术标签:

【中文标题】如何从 html-webpack-plugin 生成的 index.html 中排除 bundle.css?【英文标题】:How to exclude bundle.css from index.html generated by html-webpack-plugin? 【发布时间】:2017-04-14 12:48:49 【问题描述】:

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

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

HtmlWebpack插件选项:

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>

有人可以指点我正确的方向吗?

【问题讨论】:

快速浏览一下,我发现您的密钥 allCunks : true 中有错字。 => allChunks: true 【参考方案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?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 webpack-dev-server 和 html-webpack-plugin 观看 index.html

如何从异步迭代器中产生一系列承诺?

html-webpack-plugin打包报错

错误:html-webpack-plugin 无法缩小生成的输出

解决html-webpack-plugin和html-loader冲突问题,支持嵌套引用

webpack-dev-server和html-webpack-plugin的简单使用