關(guān)于利用webpack打包，與項(xiàng)目開(kāi)發(fā)的一些問(wèn)題！

曾經(jīng)做個(gè)php，目前做java，一直以來(lái)開(kāi)發(fā)項(xiàng)目都是建立一個(gè)工程，不提php、java代碼，前端的那些代碼，都放在對(duì)應(yīng)的目錄里，然后在頁(yè)面直接引用。
但是現(xiàn)在經(jīng)?？吹絯ebpack，打包啊什么的。
請(qǐng)問(wèn)這要怎樣結(jié)合到實(shí)際項(xiàng)目中！
因?yàn)槲乙{(diào)試啊，我更改了一個(gè)js或css文件，要測(cè)試啊，但是用webpack的時(shí)候，要從新去打包，然后再把打包完的文件copy到工程里，然后在引用。

這樣會(huì)不會(huì)很麻煩！

或者是我理解的壓根就有問(wèn)題呢，是有別的套路

回答

編輯回答

孤慣

webpack有watch模式……
監(jiān)控文件變化，文件改變之后自動(dòng)重新打包

2017年12月24日 23:59

編輯回答

臭榴蓮

用法有問(wèn)題。

既然用了webpack，那目的就是前后端的分離。
前端所有的html，css，js跟后端工程沒(méi)有任何關(guān)系。后端好好封裝接口給前端調(diào)用就好了。
所以需要2個(gè)工程，各自進(jìn)行編譯。這樣做的好處，網(wǎng)上一大堆。

從你的描述中看，如果前后端代碼還是一個(gè)工程里的，為什么要用webpack呢？
只是打包js，gulp足矣，配置更簡(jiǎn)單。
甚至只是要壓縮的話，在線壓縮工具也可以做到。

2017年12月1日 18:40

編輯回答

涼汐

這是個(gè)webpack工程化的問(wèn)題，你的需求，可以直接用webpack-dev-server解決
使用 webpack 實(shí)現(xiàn)工程化

2018年8月11日 23:26

編輯回答

心上人

好吧，這個(gè)問(wèn)題我來(lái)答
看我寫這么多的份上求32個(gè)贊

利用自己的空余時(shí)間一直在維護(hù)一個(gè)小網(wǎng)站，全是一個(gè)人在弄，由于只租得起虛擬空間，所以后臺(tái)采用了簡(jiǎn)單方便的ThinkPHP反正主要也是做一些CURD操作ThinkPHP還是挺好用的，幫我提前做好了好多功能。
本人并不擅長(zhǎng)前端，但是開(kāi)始開(kāi)發(fā)這個(gè)小網(wǎng)站發(fā)現(xiàn)，基本的功能全部要通過(guò)前端javascript來(lái)實(shí)現(xiàn)。一開(kāi)始的時(shí)候所有的javascript代碼全部寫在html頁(yè)面里。也沒(méi)有太大問(wèn)題，后來(lái)為了頁(yè)面性能要求把所有javascript和css全部minify一下。我采用的辦法把js和css通過(guò)資源文件引入。然后用在線的minify工具復(fù)制過(guò)去minify以后，復(fù)制回來(lái)保存為xxx.min.js。方法是笨一點(diǎn)，但是一來(lái)頁(yè)面不多，到也沒(méi)有多麻煩。但是漸漸的頁(yè)面開(kāi)始多了以后，就越來(lái)越不方便了。

看到這里樓主可以看到痛點(diǎn)來(lái)了，我一開(kāi)始對(duì)頁(yè)面工程化的要求就一個(gè) minify和共用代碼的重復(fù)利用

每次minify都要復(fù)制來(lái)復(fù)制去，文件多了麻煩

代碼重復(fù)利用率不高。

辦法1：重復(fù)代碼全部復(fù)制到新文件（傻）
辦法2：公用代碼保存為單獨(dú)文件分別引入，不利入頁(yè)面性能

這時(shí)候讓我不得不考慮使用前端自動(dòng)化構(gòu)鍵工具
其實(shí)一開(kāi)始我選用的是gulp 也能滿足我的需求，但是看到webpack太火了，所以后來(lái)改用了webpack

用于網(wǎng)站不是單頁(yè)程序，所以我更據(jù)不同的頁(yè)面，打包不同的js和css然后，通過(guò)Webpack 分布到網(wǎng)站的public目錄，php模板中只需要引入相關(guān)css和js即可。

用了構(gòu)建工具的好處

**把minify自動(dòng)化了，調(diào)試的時(shí)候不壓縮，發(fā)布的時(shí)候壓縮
可以使用ES6愉快的寫代碼了
代碼重復(fù)利用率高了，（直接引入雖然也可以重復(fù)利用代碼，但需要打包成不同的js文件，全部通過(guò)頁(yè)面引入，但是通過(guò)webpack，你開(kāi)發(fā)的時(shí)候抽取共用模塊，打包的時(shí)候可以更具需求打包在一起成為一個(gè)文件，提高頁(yè)面性能**

2018年1月26日 00:41