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

我想使用html-webpack-plugin 仅用于我的JS块。bundle.css是由提取物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>

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

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

使用它，您可以排除资产，以防止它们自动粘贴。另外，您仍然可以使用lodash语法将路径插入模板。

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

相关内容

最新更新

热门标签：