javascript - webpack多页面打包的问题
本文介绍了javascript - webpack多页面打包的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
项目结构的大致介绍
后端采用express渲染
前端很混乱，angular + 单页的活动页面
-
自动化工具使用：
现在使用的是
grunt，但是随着项目的变大，变得越来越不利于维护，决定使用webpack来构建。
现在每个页面都单独引用了不同的js，有的页面有公共的bower包，有的页面没有公共的js。
style（scss）的引用情况同上。
angular项目是也是用的script标签引用的方式
贴上目前项目某个页面的代码
<!DOCTYPE html>
<html>
<!--引入公用头部-->
<% include common/m_common_head.html %>
<!-- 引入H5 CSS -->
<!-- build:css(.tmp) /styles/h5_common.css -->
<link rel="stylesheet" href="/styles/h5_common.css">
<!-- endbuild -->
<% include common/m_css_vendor.html %>
<% include common/common_header.html %>
<body>
<%- include('account/h5_register_' + pageInfo.status + '.html') %>
</body>
<% include common/m_js_vendor.html %>
<!-- build:js(client) /scripts/m_vendor.js -->
<script src="/bower_components/jquery-3.0.0.min/index.js"></script>
<script src="/scripts/plugins/base64code.js"></script>
<script src="/scripts/plugins/jquery.tap.js"></script>
<script src="/scripts/plugins/plugins.js"></script>
<!-- endbuild -->
<!-- build:js(client) /scripts/h5_register.js -->
<script src="/scripts/account/h5_register.js"></script>
<!-- endbuild -->
<%- include('bd/common/footer.html') %>
</html>
遇到的问题
以上需求通过grunt的一系列插件都可以做到。
现在想用webpack针对不同的html页面中引用的js以及style的不同来分别打包相应文件并将打包后的文件路径注入到html的script和style标签中。
想请问下大神们，这个项目如果要使用webpack来实现上述需求，结构需要怎么改进，webpack应该怎么配置。小弟在此深表感谢！！！
解决方案
https://github.com/callmedada... 里面做了多页面打包支持，可以参考下思路
大概思路就是配置好entry以及html的映射，然后遍历使用html-webpack-plugin进行生成
这篇关于javascript - webpack多页面打包的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
