Building multi-page application with Gulp+webpack--the construction process of remembering node multi-page application

By reference to some of the construction methods on the Web, of course, also in the development process to do some practice, and finally set up a suit for the current multi-page application of the construction scheme, of course, the program is still in the draft version, will continue to optimize in the subsequent evolution process.

Individuals feel that the evolution of the programme is worth noting in relation to results. But before we do, let's start with a brief introduction to the overall architecture of the project, so that we can understand why this is the way to build. The process of entering URLs into a page in a browser is listed as a typical service directly architecture, where our main focus for front-end engineers is on the browser side and the node layer. In the node layer, we encapsulated the KOA and adopted an MVC architecture similar to EGGJS, and using Pug as the template engine, the technology stack is not complex.

V0.0.1: Building a front-end resource with Webpack

What to do during the construction process? Believe that different people have different opinions:

• Compress static resources and reduce transmission bytes;
• To prevent the browser from reading the old cache file, you need to add a MD5 stamp for the static resource;
• Automatically add vendor prefix for CSS properties;
• ......

The items listed above are also what we need to consider in the construction process. In the early construction of the project, we chose to use Webpack as the building tool, the reason is very simple: powerful, with a lot of people, so a beat the head to choose it. Of course, Webpack also does not live up to expectations, through which we can like to write node directly into other files, in the pre-use did bring us a lot of convenience.

However, after all, our project and Webpack mainstream use scenes, such as react, Vue and other projects still have a lot of differences, in the use of webpack in the process of a number of acclimatized places, although all finally through a number of ways to solve, but it also prompted us to think, Whether there are other more appropriate options.

Question one:

How do I get webpack to package all resource files?

Workaround:

Webpack will use entry as the entry point to find all the dependencies and build them. Since webpack only knows JavaScript files, it is necessary to use loader to convert non-JavaScript files into modules that Webpack can handle. So, if a resource file needs to be built by Webpack, the resource file must be from entry. The ideal scenario for our project is to use the Pug template file as a portal, but since the data required for the Pug template file is obtained from the server and is not known during the build phase, it can only be retired and then the JavaScript file is used as the portal.

For different types of files, we have adopted different strategies:

• For the picture, we used the Require.context method provided by Webpack, which allows us to use the regular way to introduce the corresponding module. So we added the following file and placed it in the entry property of Webpack.

true,/\.*\. (Jpg|png|jpeg|gif|ico) $/i)

• For CSS files, of course you can do the same, but this will compile all the CSS into a file, resulting in a large file size, so that the page load time is longer. So we can only choose to add the import './xxxx.less ' to the corresponding JavaScript file to tell Webpack that you need to build the XXXX less/css file. This functionality is implemented, but not elegant, and also makes JavaScript less pure and reusable by other projects that do not use webpack as a building tool.

Question two:

After node gets the data from the server, it renders the Pug template HTML and sends it back to the browser side, so how do you keep a reference to the static resource in the template? Because the build tool adds MD5 stamps to all of the resource files, we don't know what the exact file name is when we encode it.

Workaround:

With the Webpack-manifest-plugin plug-in, it generates a Manifest.json file that lists the matching relationship between the original file name and the built file name after the Webpack build is complete. By passing Manifest.json as a parameter into the pug's Render method, you can maintain a reference to the static resource in the Pug template in a manner similar to img (src=manifest["logo.png") .

V1.0.0-beta: Building a front-end resource with Gulp+webpack

There are always ways to solve the problem, but it's always awkward and uncomfortable to write, which leads us to think about whether Webpack really works for our project. After a discussion, we finally decided to try to build it in a gulp+webpack way.

1. Using Webpack to construct JavaScript resources, it is convenient to use the idea of Webpack module, which makes the reference between JavaScript simple and convenient.
2. Use Gulp to build CSS, images and other resources.

When using Webpack to build JavaScript, in order not to add a new file every time to modify the configuration of webpack, so we wrote a method to put all the JavaScript into the Webpack entry attribute.

function Entries (globpath) {    = Glob.sync (globpath);     = {};      for (let file of files) {        = path.extname (file);         = Path.basename (file, ext);         if (Name.startswith (' _ ')) {            continue;        }         = Path.join (__dirname, file);    }     return Entries}

When using, you just need to enter the specified JS path in the Globpath, such as

Let Webpackconfig = {    entry:entries ('./public/**/*.js '),}

In the actual development, we found that some JavaScript files exist to be referenced by other files, such as some helper methods, they do not exist as Webpack entry, so we only look for in the entries method is not the underscore (_ ) starts with a JavaScript file, so for some JavaScript files that have only helper methods, you just need to start the file name with _, so it won't be added to the entry attribute of the Webpack, which is a small egg in the build scheme ~ ~ ~

In the use of gulp to other resources in the construction process, we used a lot of mature gulp plug-ins, which I think the more important is gulp-rev and gulp-rev-replace. Where the Gulp-rev plugin is used to add MD5 stamps to CSS, images and other resource files and generate the corresponding Manifest.json files, together with the Gulp-rev-replace plug-in will Pug, CSS and other files exist in the Manifest.json of the file name to replace, so that we can reference the resource file in the Pug template to directly write the img (src=logo.png) and do not need to be as complex as before (Chou) miscellaneous (Lou).

Because the content of the configuration file is long, so it is not pasted into the article, if you want to refer to the detailed configuration content, you can click Https://gitee.com/philipding/codes/4xi0plvhfa86onrmzwkes21 to view.

Another digression, in fact, before using the Gulp-rev+gulp-rev-replace plugin, we tried to use the Gulp-md5-plus plugin. Gulp-md5-plus plug-in is super convenient to use, it can add MD5 stamp, can also replace the file name, but the plugin does not support the ability to add custom prefixes, and this function is really necessary for us. Because in a production environment, all the resource files are placed on the CDN, and the resource files in the test environment are placed on the corresponding test server, so the same picture, the address of the test environment may be public/images/logo.png, and the production environment is// Cdn.demo.com/images/logo.png, so we need to support the custom prefix feature and prefix it with code like the following, var prefix = Process.env.NODE_ENV = = = ' Production '? '//cdn.demo.com/': '/public/' .

Written at the end:

The above-mentioned construction scheme may not be perfect, but it is a relatively appropriate one for the current project. Of course, it is not ruled out that the plan will be replaced by other more elegant alternatives. But through so many attempts, the reconstruction, only then really realizes what "is suitable is the best?".

Building multi-page application with Gulp+webpack--the construction process of remembering node multi-page application