Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I want to use html-webpack-plugin only for my js chunks. Bundle.css is generated by extract-text-plugin:

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

HtmlWebpackPlugin options:

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

My tpl.html looks like this:

<!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>

I want to see something like this in my 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>

Can someone please point me in the right direction?

like image 646
Nachkebiia Lasha Avatar asked Feb 23 '26 19:02

Nachkebiia Lasha


1 Answers

You can use html-webpack-exclude-assets-plugin

With it you can exclude assets which prevent them from being pasted automatically. Also you still can insert path to your template with lodash syntax.

<link href="getResource?resource=<%= htmlWebpackPlugin.files.css[0] %>&mediaType=text/css" rel="stylesheet">
like image 160
Dzmitry Vasilevsky Avatar answered Feb 25 '26 08:02

Dzmitry Vasilevsky