关于利用webpack打包，与项目开发的一些问题！

Question

曾经做个php，目前做java，一直以来开发项目都是建立一个工程，不提php、java代码，前端的那些代码，都放在对应的目录里，然后在页面直接引用。
但是现在经常看到webpack，打包啊什么的。
请问这要怎样结合到实际项目中！
因为我要调试啊，我更改了一个js或css文件，要测试啊，但是用webpack的时候，要从新去打包，然后再把打包完的文件copy到工程里，然后在引用。

这样会不会很麻烦！

或者是我理解的压根就有问题呢，是有别的套路

Answer 1

好吧，这个问题我来答
看我写这么多的份上求32个赞

利用自己的空余时间一直在维护一个小网站，全是一个人在弄，由于只租得起虚拟空间，所以后台采用了简单方便的ThinkPHP反正主要也是做一些CURD操作ThinkPHP还是挺好用的，帮我提前做好了好多功能。
本人并不擅长前端，但是开始开发这个小网站发现，基本的功能全部要通过前端javascript来实现。一开始的时候所有的javascript代码全部写在html页面里。也没有太大问题，后来为了页面性能要求把所有javascript和css全部minify一下。我采用的办法把js和css通过资源文件引入。然后用在线的minify工具复制过去minify以后，复制回来保存为xxx.min.js。方法是笨一点，但是一来页面不多，到也没有多麻烦。但是渐渐的页面开始多了以后，就越来越不方便了。

看到这里楼主可以看到痛点来了，我一开始对页面工程化的要求就一个 minify和共用代码的重复利用

每次minify都要复制来复制去，文件多了麻烦

代码重复利用率不高。

办法1：重复代码全部复制到新文件（傻）
办法2：公用代码保存为单独文件分别引入，不利入页面性能

这时候让我不得不考虑使用前端自动化构键工具
其实一开始我选用的是gulp 也能满足我的需求，但是看到webpack太火了，所以后来改用了webpack

用于网站不是单页程序，所以我更据不同的页面，打包不同的js和css然后，通过Webpack 分布到网站的public目录，php模板中只需要引入相关css和js即可。

用了构建工具的好处

**把minify自动化了，调试的时候不压缩，发布的时候压缩
可以使用ES6愉快的写代码了
代码重复利用率高了，（直接引入虽然也可以重复利用代码，但需要打包成不同的js文件，全部通过页面引入，但是通过webpack，你开发的时候抽取共用模块，打包的时候可以更具需求打包在一起成为一个文件，提高页面性能**

Answer 2

webpack有watch模式……
监控文件变化，文件改变之后自动重新打包

Answer 3

这是个webpack工程化的问题，你的需求，可以直接用webpack-dev-server解决
使用 webpack 实现工程化

Answer 4

用法有问题。

既然用了webpack，那目的就是前后端的分离。
前端所有的html，css，js跟后端工程没有任何关系。后端好好封装接口给前端调用就好了。
所以需要2个工程，各自进行编译。这样做的好处，网上一大堆。

从你的描述中看，如果前后端代码还是一个工程里的，为什么要用webpack呢？
只是打包js，gulp足矣，配置更简单。
甚至只是要压缩的话，在线压缩工具也可以做到。