Article From:https://segmentfault.com/q/1010000012140786
Question:

Once a PHP, now Java, the development project has been building a project, not PHP, java code, the front end of the code, all in the corresponding directory, and then directly referenced on the page.
But now I often see webpack, pack and stuff.
How to combine this to the actual project!
Because I want to debug, I changed a JS or CSS file to test it, but when using webpack, I want to pack it from new, then put the packaged file copy into the project, and then quote.

It’s going to be a lot of trouble!

Or I understand that there is no problem at all. There are other ways.

Answer 0:
Well, I'll answer this question.See I write so many copies and ask 32 praise

Use their spare time to maintain a small site, all is a person in the game, because only rent a virtual space, so the background is simple and convenient ThinkPHP is to do some CURD operation ThinkPHP or good, help me a lot of functions in advance.
I am not good at front-end, but the development of this small website found that all the basic functions must be realized through the front-end JavaScript. At the beginning, all JavaScript codes were written in HTML pages. There is no big problem, and later for page performance requirements.Minify all JavaScript and CSS. My approach is to introduce JS and CSS through resource files. Then copy the past minify with the online minify tool, then copy it back and save it to xxx.min.js. The method is stupidPoint, but not many pages, and no trouble at all. But gradually the pages began to become more and more inconvenient.

Seeing that the landlord here can see the pain point, I began to reengineer the requirements of the page on the reuse of a minify and shared code.

Every time minify is copied and copied, there is more trouble.

The code reuse rate is not high.Method 1: duplicate code is copied to the new file (silly).Method 2: public code preservation is introduced into separate files, which is unfavorable to page performance.

At this time, I had to consider using the front-end automation key tool.
Actually, I used gulp to satisfy my needs at first, but I saw that webpack was too hot, so I changed webpack later.

The web site is not a single page program, so I am more based on different pages, pack different JS and CSS, and then distribute to the public directory of the web site through Webpack, and PHP templates only need to introduce the related CSS and JS.

The benefits of building tools

**The minify is automatically debugged, not compressed, and compressed when released.
You can use ES6 to write happy code
Code repetition rate is high. (direct introduction can also reuse code, but it needs to be packaged into different JS files, all through the page, but by webpack, you can extract common modules when you develop it, and pack them together to become a file when packaged.Page performance * * *

Answer 1:

webpackYeswatchMode…
Monitor file changes and automatically repackage after file changes.

Answer 2:

This is a onewebpackEngineering problems, your needs can be directly used.webpack-dev-serverSolve
Using webpack to realize engineering

Answer 3:

There is a problem in usage.

Since webpack is used, the purpose is to separate the front and the rear ends.
All front-end HTML, CSS and JS have nothing to do with the back-end project. The back end encapsulates the interface to the front end.
SO 2 projects need to be compiled each. The advantage of doing this is a lot of online.

From your description, if the front end code is still in a project, why use webpack?
Just pack JS, gulp is enough, and the configuration is simpler.
Even if it’s just to be compressed, the online compression tool can do that.

Leave a Reply

Your email address will not be published. Required fields are marked *