“Background”

At present, most of our projects are developed by Vue or React. Just last month, there was a request for a multi-page official web page that ended up producing 20+ pages, but most of the pages could be produced using the same template, with some of the data being different. For example, there are several different products under the product, and each product should have a separate page with the same layout and only copy and pictures need to be replaced. And the project should support SEO. After some consideration, I chose webpack + Art + JQ.

“Art – the template”

Art-template is a minimalist, ultra-fast templating engine. It supports both NodeJS and browsers.

I chose ART because of its template syntax, and when I talk about template syntax, I’m sure some people will ask why not use EJS? Ejs was used in the beginning, but the EJS-loader had problems with hot updates and could not listen to new pages, which was very inconvenient during development, so it replaced art-template, which also had EJS template syntax.

The ART syntax supports template import, and all reusable templates are pulled out, just like writing components in VUE.

Include can be introduced to each page. There are also outputs, conditions, loops, sub-templates, etc., which can be configured according to their respective projects.

“Webpack”

Webpack needs to configure the file entry and output, mainly through entrys and TPLS functions to read the corresponding information, and write it into the Entry of Webpack and HtmlWebpackPlugin respectively.

The SASS of the corresponding page is entered through JS import. Then through MiniCssExtractPlugin compiled to generate a separate CSS into the page.

Because this article mainly introduces the multi-page solution, the code display is only part of the Webpack configuration, there are other Plugin, Loader is not in this introduction, you can choose your favorite Plugin, Loader

The project uses webpack-chain to modify the Webpack configuration in chain mode. Please refer to the specific syntaxGithub

Page. json is the file that manages all the multi-page configurations

  • Filename corresponds to the output directory
  • TPL Indicates the path of the input template
  • Script /chunk corresponds to the js name of the imported JS path
  • Params corresponds to injected data

{{title}}, as written in 👆 TPL above, is used for data injection

The advantage of defining a single configuration JSON in this way is that each page can be customized accordingly, so that others can clearly see the configuration of each page when they take over the project, and can quickly configure their own functions.

The disadvantage is that you need to recompile the file after modifying the configuration JSON. Also, as the project page increases, the number of times you need Ctrl C/V increases

By this step, the overall framework of the project is completed, and the development can be happy.