關(guān)于利用webpack打包，與項目開發(fā)的一些問題！

曾經(jīng)做個php，目前做java，一直以來開發(fā)項目都是建立一個工程，不提php、java代碼，前端的那些代碼，都放在對應(yīng)的目錄里，然后在頁面直接引用。
但是現(xiàn)在經(jīng)常看到webpack，打包啊什么的。
請問這要怎樣結(jié)合到實際項目中！
因為我要調(diào)試啊，我更改了一個js或css文件，要測試啊，但是用webpack的時候，要從新去打包，然后再把打包完的文件copy到工程里，然后在引用。

這樣會不會很麻煩！

或者是我理解的壓根就有問題呢，是有別的套路

回答

編輯回答

孤慣

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

2017年12月24日 23:59

編輯回答

臭榴蓮

用法有問題。

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

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

2017年12月1日 18:40

編輯回答

涼汐

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

2018年8月11日 23:26

編輯回答

心上人

好吧，這個問題我來答
看我寫這么多的份上求32個贊

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

看到這里樓主可以看到痛點來了，我一開始對頁面工程化的要求就一個 minify和共用代碼的重復(fù)利用

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

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

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

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

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

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

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

2018年1月26日 00:41