logo标签列表

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

javascripthtmlreactjswebpackhtml-webpack-plugin
3

我想仅使用html-webpack-plugin来处理我的js代码块。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页面看到类似这样的内容：
```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>

请问有人能指导我方向吗？

这段内容和IT技术无关。
我快速查看了一下，发现你的键allCunks : true中有一个拼写错误。应该是allChunks: true。 - Jyothi Babu Araja
1个回答
4
你可以使用 html-webpack-exclude-assets-plugin。使用它，你可以排除资源，防止它们被自动粘贴。同时，你仍然可以使用 lodash 语法插入模板路径。
<link href="getResource?resource=<%= htmlWebpackPlugin.files.css[0] %>&mediaType=text/css" rel="stylesheet">
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接