webpack htmlWebpackPlugin问题

使用webpack中的htmlWebpackPlugin进行打包,通过自定义Html末班生成页面,可是htmlWebpackPlugin.files生成的页面js文件竟然是双份的。

webpack HtmlWebpackPlugin配置

  new HtmlWebpackPlugin({
    title: 'TypeScript Demo',
    template: './src/index.html'
  })

html 模板

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
    <% for (var css in htmlWebpackPlugin.files.css) { %>
        <link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
    <% } %>
</head>

<body>
    <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
        <script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
    <% } %>
</body>

</html>

渲染的结果

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>
        TypeScript Demo
    </title>
    
</head>

<body>
    
        <script type="text/javascript" src="http://127.0.0.1:20006/dist_web/vendor.0c5d63af356a9e7241e3.min.js"></script>
    
        <script type="text/javascript" src="http://127.0.0.1:20006/dist_web/module.0c5d63af356a9e7241e3.js"></script>
    
<script type="text/javascript" src="http://127.0.0.1:20006/dist_web/vendor.0c5d63af356a9e7241e3.min.js"></script><script type="text/javascript" src="http://127.0.0.1:20006/dist_web/module.0c5d63af356a9e7241e3.js"></script></body>

</html>
阅读 4.1k
2 个回答
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
        <script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
    <% } %>

把这一段去掉,多余了。

如果非要留着上面的这段,可以设置这个字段 inject

 new HtmlWebpackPlugin({
    title: 'TypeScript Demo',
    inject: false,
    template: './src/index.html'
  })

HTML Webpack Plugin 文档

楼上说的对,HtmlWebpackPlugin 的 inject 默认值是 body(true) 会自动注入 script 到 html 中。
就不用手动添加了 https://segmentfault.com/a/11...

推荐问题
宣传栏