webpack在类ERP项目中如何打包js、css这类的资源?

Question

问题背景

公司的ERP项目，基于java的ssh框架, 模板是freemaker。前端的同事只负责切图做静态页面很少有会写js的，js代码都是后台同事帮忙写。代码组织上也很落伍:公共的js代码写在单独的js文件中，页面相关的js(需要操作dom或者相应dom事件的js代码)大都是jquery直接写在html中。个人感觉这样很low, 而且在维护方面也已经体现困难的方面了。我自知自己没有能力实现什么前后端分离，也没能力实现什么前端的组件化开发，只是想趁业余时间学习提升一下自己，看看如何将所学的前端知识应用到项目中，提高前端代码的重用性、健壮性和可维护性。

---

问题描述

在给问题起标题时有犹豫了好久，感觉这个问题是代码组织方面的问题，是js与html分离的问题, 也是模块化的问题。自以为js只有与html分离了，模块化了才可以方便加单元测试。本想研究一下 seajs或者requirejs的，资料找来找去最后定位在了webpack上。

目前遇到的问题是: 项目很大页面好多, 除了系统设置相关的基本功能还有业务相关如 采购、销售、库存、财务 等等模块。公共的js代码好说webpack可以直接提取, 页面相关的js(也就是需要响应dom事件或者操作dom的js)该如何组织呢？webpack又如何按需加载呢(比如用户管理就加载公共js和用户管理页面相关的js)？

---

已经尝试过哪些方法仍然没解决（附上相关链接）

对于js的模块化及代码组织，我考虑的不多，目前用上了es6，modules问题算是解决了，代码代码如何组织，尤其是页面相关的js如何组织还没有头绪，希望各位大大指点。

至于js的按需加载，我试着用了下 HtmlWebpackPlugin，感觉不是很好用。因为靠 HtmlWebpackPlugin来生成freemaker template感觉怪怪的，而且template代码也不固定, 如果修改起来需要后台开发人员去修改 HtmlWebpackPlugin 的模板，感觉有点儿不太合理。再说这种html多达几十上百个……

还望各位前辈指教。

---

2016-2-9 补充内容

看 @cucr 的答复，可能是我问题没有描述清楚，这里补充如下:

1. 页面相关的js该如何组织呢，如下图:

page-js 代码都是操作dom的js，这些代码如何组织呢？

按照页面单独写一个js文件吗？比如用户列表页面就写一个user_list.js, 用户详情页面就写一个user_info.js吗？感觉这样不好~

之前写的代码大都是基于jquery类似:$(document).ready(function（）{xxx})的形式写在html页面中。如果写到js文件中只需要直接将这些代码copy到js文件中就可以了吗?

2.webpack打包后的js如何自动嵌入到相应的html文件中呢？

由于项目比较大, 单单比较大的功能模块就几十上百个，而且相关的页面都是基于freemaker模板写的。用webpack打包的话，单entry要有好多, 该如何实现js的按需加载呢？

为了避免项目更新导致静态资源的缓存问题，我打包的js名称都是[name].[hash:8].js格式。如果每次更新都手写script标签，工作量太大。

我尝试过用 HtmlWebpackPlugin 来自动生成相应页面的freemaker模板代码，由于这些模板代码不固定需要随时更新，如果让后台开发人员来修改 HtmlWebpackPlugin 的template代码感觉不合理。而且，这些页面太多，数量恐怕要成百上千计 HtmlWebpackPlugin用起来就感觉很笨拙了, 不知各位前辈还有其它妙法来让相应的页面只引入公共js和本页面相关的js不引入其它无关js吗？

Answer 1

webpack主要在单页面单入口的SPA应用比较好，也不用太多配置，网上找一个别人配置好的模板就能上手。
然而，我开始尝试用webpack打包多页面多入口的传统静态网页时，麻烦和坑接踵而来，而且在中文互联网基本上找不到答案，我都是得上webpack的issues和stackoverflow才一步一步解决的。

我看你要做的就是这样传统多页面多入口，我先劝你一句，这并不太适合用webpack打包，我觉得可以requirejs进行模块化+gulp建立工作流来打包是比较好的办法。

如果要用webpack的话，我最近在也尝试，我不是前端架构高手，我只能给出一点使用心得。

webpack打包输出的结果是扁平化的，所以资源都放在一块，不过你这个可以自己配置输出路径，也可以做到按src目录结构输出。
webpack以入口文件为主，生成chunk文件。
输出的结果是，你在入口文件有require到某个js、css资源，webpack就会将其放到入口文件同名的chunk中，再输出用同名的js、css。

然后你就可以用各种loader和plugins来处理，比如用CommonsChunkPlugin就可以将多入口公共代码提出到一个公共chunk里，然后再输出和这个公共chunk同名的js、css。

由于你是多页面文件，所以就一个页面对应的一入口文件。

关于页面相关的js(也就是需要响应dom事件或者操作dom的js)该如何组织呢？一般就是写在页面对应的入口文件中。

关于webpack又如何按需加载呢，这就要用的webpack的code splitting功能，用require.ensure(dependencies, callback)来实现按需异步加载。

page-js 代码都是操作dom的js，这些代码如何组织呢？这些你可以用在一个单独文件中，然后用require.ensure异步按需加载。

然后你说用HtmlWebpackPlugin去生成freemark tempalte我就不太懂了，HtmlWebpackPlugin是根据模板生成 html文件的工具，也说是HtmlWebpackPlugin是自带模板的，你所说的如果每次更新都手写script标签这个应该是可以用它的模板和HtmlWebpackPlugin来解决，这个插件有注入script的功能。

最后我想说的是，你ERP项目是自己公司的人在用吧，那搞那么多干嘛，能用就行了。

Answer 2

涉及代码架构技术栈的问题啦，请一个前端高手架构规划一下吧。
我实习的公司模块化使用的是seajs，用起来也简单，java也是用的free maker，模板层面的不会，只会切图和js。后台cms总得就是grunt(为了生成js模板)，被我一直嫌弃

Answer 3

既然模块化了，就可以直接webpack打包了，可能还是模块化不够彻底