The Golden Arch is very popular these days, so let’s take a look at its website.

After reading, if your boss wants you to do such a website, must SEO, must be compatible with IE, how will you do it?

Use vue/ React. Single-page apps don’t do SEO, and Internet Explorer isn’t compatible. Doing server rendering in the middle tier of Node is causing trouble again. You can only do this with JQuery, but how do you engineer it? It doesn’t seem that easy. Because at present everyone’s engineering scheme is a set of single-page application family bucket, such as vue-CLI webpack template.

And the front end to now this stage, let everyone take over a project without engineering, certainly the heart is very resistant. Imagine a project where manual link resources can’t write less/sass, can’t write ES6, can’t rely on management, can’t compile and package… Oh god, I can’t even think about it. But engineering is not as smooth as you think in practice. For example, just golden Arch’s official website, many pages, requirements to meet SEO, IE compatibility. And encountered these projects, there are often these problems:

  1. Since the page is a back-end rendering, and back-end programs (PHP, Java, etc.) need to be deployed, the various environment configurations are quite cumbersome.
  2. The FRONT-END HTML code relies on the server, resulting in the front-end engineering, it is difficult to connect with the front and back end projects.

In other words, we need to do an engineering project that is not a single page application. The project was front-and-back coupled when it was online, but we didn’t want to be front-and-back coupled when we were developing it. To reorganize, we need to solve the following problems:

  1. Front-end development cannot depend on the back-end environment.
  2. Front-end engineering. Such as static resource packaging compilation, dependency management, componentization, and so on.

Having identified the problem to be solved, we can begin. We can use WebPack to build a project and do some engineering work for us, such as packaging, compilation, and file handling. Webpack configuration from zero is cumbersome, we can choose to modify a wheel, such as vue-CLI webpack template transformation, delete unnecessary vue-loader, add a multi-page entry to it.

Change the wheel

Step 1: Understandvuejs-templates/webpack

npm install -g vue-cli

vue init webpack my-projectCopy the code

If you want to change their template, you have to understand what they have done. I’m not going to show you the code here, but I’m going to show you the code from package.json file to file, which is straightforward and violent.

Step 2: Delete

Since we don’t need vUE, we don’t need logic for vUE file processing. Vue-loader and vue-style-loader are not required according to what we have just learned about this template. So delete the corresponding code and the package in package.json.

More importantly, although vue-style-loader is not required, style-loader is required, so you need to replace the former with the latter.

Step 3: Add

Subtraction is easy, addition is not so easy. According to our requirements, we should add a multi-page entry to it. There are many webPack multi-portal configuration tutorials available online. However, they may not be able to meet our needs. They generally have the following problems:

  1. Import files need to be configured by themselves. In a project with many pages, the entry files should be automatically read from the convention directory, and it is also better by convention than by configuration.
  2. Multiple entry is for JS. Because the industry is generally in the use of a single page application, the page is generated by JS, so many pages as long as multiple JS entry is good, do not need to directly write HTML. My requirement is not that I want multiple entries for HTML files.

But when we solve these two problems, we have a new problem. Our different HTML files actually have some common parts. For example, they have headers and footers. In other words, we need to add a template to these HTML files. We can use webpack loader to achieve this, but there is no ready-made loader to better solve. So what to do? You can refer to my other article. Write your own Webpack Loader.

Versioning of static resources

With these problems solved, our work is not done. The project’s static resources are now controlled by file hashes. Unfortunately, some projects have static resources that require the backend to update the timestamp control. It’s not a good idea, but some projects are. We have to get rid of the hash in order to accommodate them. However, when we want to update the image referenced in the CSS, there is no way to do so, because the backend of the image in the CSS chain has no control over the version.

So how do we solve this? Thanks to WebPack, we can do this with the following configuration:

{
  test: /\.(png|jpe? g|gif|svg)(\? . *)? $/.oneOf: [{issuer: /\.html$/.loader: 'url-loader'.options: {
        limit: 10000.name: utils.assetsPath('img/[name].[ext]',)}}, {issuer: /\.(css|less)$/.loader: 'url-loader'.options: {
        limit: 10000.name: utils.assetsPath('img/[name].[hash:7].[ext]'}}]}Copy the code

This means that images are not hashed if they are referenced in HTML, and images introduced in CSS files are.

Completion of the

This gives us a simple project architecture. It can help us to achieve file packaging, compilation, HTML template control and other functions. Eventually build an HTML + static resources web page directly published CDN. You can also throw them directly to the back end.

However, this shelf is not very perfect, application scenarios are also limited, more suitable for some less interaction, more pages, value SEO or traditional backend page set site. In addition, as componentization and testing are very important in engineering, since there is no introduction of any framework, users need to explore this point by themselves.

Alternatively, if you still want to use Vue, React, or Angular and don’t want to do their server-side rendering, try a variant of the server-side rendering system.

Finally, if this shelf is useful to you, feel free to poke github.

Please get my authorization before reprinting.