Talking about WebPack + React Multi-Page Development Ultimate Architecture

WebPack is widely packaged on a single page, and the scaffolding headed by Create-React-app is numerous, and the single page package usually refers to the business JS, CSS to the same html file, only one HTML file entry However, there are also many businesses that require multiple pages, such as different H6 activities, or to support the official website of SEO, there are multiple different HTMLs. WebPack-React-Multi-Page architecture allows you to automate the package new creation page in multi-page in project development and ensure that every page can be hot, and the build is a clear file hierarchy after packaging.

Key

Value Name WebPack + React Multi-Page Architecture Release Date Version github address Characteristics Support multi-page simultaneous heat loading development Automatic identification of new creation page
Description Simple and easy to use multi-page automated development architecture
2018-11-07
Warehouse

Each page generates personalized information

classification packaging

Flexible expansion
  • Installation & Use
  • // Clonegit Clone git@github.com: Leinov /webpack-rect-multi-page.git/ / Installation Dependent Pack NPM Install // Develop NPM Run Dev // Compile NPM Run Build // Start Production Page NPM Start

The new creation page adds a folder under the SRC and creates pageinfo.json and then NPM Run dev

 | - SRC | - INDEX / | - Page2 / | - Index.js | - PageInfo.json   


Technical use

React16
 WebPack4   HTML-WebPack-Plugin generates HTML file 
Mini-CSS-Extract-Plugin CSS separation package
UGLIFYJS-WebPack-Plugin JS Compression

Optimize-CSS-Assets-WebPacK-PLUGIN CSS compression

ES6

Babel

Node
  • OPN opens the browser
  • COMPRESSION open Gzip compression
      Express
    • git
  • | – WebPack-React-Multi-Pages // Project | – DIST // Compile Production Directory | – INDEX | – INDEX.CSS | – Index .js | – About | – About.css | – About.js | – images | – index.html | – about.html | – node_modules // node package | – src // development directory | – Index // Index Page Package | – Images / | – JS | – App.JS // Business JS | – Index.Sass | – Index.js // Page JS Portal | – About // About page Packing entry | – images / | –js | – app.js // Business JS | – About.SASS | – ABOUT.JS// Page JS Entry | – Template.html // HTML Template | – Style.SASS // Public Sass | – WebPackConfig // Used in WebPack | – GetEntry.js // Get inlet | – GetFilePath. JS // SRC requires packaging page folder | – htmlconfig.js // Each page HTML injection data | – package.json | – .gitignore | – WebPack.config.js // WebPack configuration file | – www.js // Production launch procedure
    • Wiki
    • WebPack package single page application
    • WebPack is widely packaged on single page, and the CREATE-React-App is a large number of contact scaffolds, and single page packages usually refer to the business JS, CSS to the same HTML file, only one html of the entire project. File entry
    WebPack single page package configuration
  • WebPack.config.js


Module. Exports = (ENV, Argv) => ({Entry: “Src / Index.js”, Output: {path: path.join (__ DIRNAME, “DIST”), filename: “bundle.js”}, module: { Rules: […],}, plugins: [New HTMLWEBBPLUGIN ({Title: “Home”, FileName: “INDEX.HTML”, Favicon: “”, Template: “./src/template.html”,})]});

  This can be packed out in the Dist folder  

Home


WebPack multi-page package configuration

WebPack’s Entry supports two formats
   packaged a single file 


Module.Exports = {Entry: ‘.src / file.js’, Output: {path: path.resolve (__ DIRNAME, ‘DIST’), FileName: ‘bundle.js’}};
    This will packet a bundle.js    in the distortion  
module.exports = {entry: {index: "./ src / index.js", about: "./ src / about.js"}, output: {PATH: PATh.Resolve (__ DIRNAME, 'DIST'), FileName: '[Name] .js' Index.js, About.js These two files}};

Pack each JS file

to the corresponding HTML file in the DIST

Here we need to use HTML-WebPack-Plugin This webpack plugin, you need to add a new htmlwebpackplugin ({….})

const htmlwebpackplugin = Require (“HTML-Webpack-Plugin”; Module.Exports => ({Entry: {index: “./ src / index.js”, About: “./ src / about.js” }, Output: {path: path.resolve (__ DIRNAME, ‘Dist’), filename: ‘[name] .js’ index.js, about.js These two files} …. // Other Configuration Plugins: [ New htmlwebpackplugin ({filename: “index.html”, // generated index.html template: “./src/template.html”,}) // Template Chunks: [“index”]}, new HTMLWebPackPluGin ({filename: “about.html”, // generated index.html template: “./src/template.html”,}) // Template Chunks: [“d”]})]}
   
HTML-WebPack-Plugin generates the corresponding FileName name of the HTML file through the Template.html template, and packaged into the corresponding folder in Output, pay attention to there is no special In the case of a configuration, all packaged files are corresponding to the PATH in the Output, including HTML. Here, CHUNKS needs to note that it is determined which JS needs to introduce this HTML. If you don’t write, the default will lead all the packaged JS, of course, this is not what we want.
The above configuration can eventually package the following file structure


| – DIST | – INDEX.JS | – About.js | – Index.html // Mount index.js | – About.html // Mount About.js

  Configuration, plus DEVSERVER, we can already realize multi-page configuration development, but this is not intelligent, because every page is added, you will be able to configure it once in WEPBACK, it will be very cumbersome, so we will optimize, Let us only focus on the development page, configure it to WebPack itself.  
WebPack Multi-page configuration Optimization

We look at the file structure below SRC

| – SRC| – INDEX | – APP.JS | – INDEX.SCSS | – INDEX.JS | – About | – app.js | – index.scss | – index.js


SRC, each folder corresponding to an HTML page JS service, if we find the folder directly to the entry JS, merge them to generate the corresponding Entry, then don’t manually write Entry Yes, yes!
   
/ * eslint-env node * // ** * @file: getfilepath.js traversal file directory * @Author: Leinov * @date: 2018-10-11 * / const fs = required (“fs”); / ** * [Traverside file directory under a file] * * @Param {string} Path path * @returns {array} [“about”, “index”] * / module.exports = function getFilePath (path) {let filer = []; let existPath = fs.existssync (PATH) / / Whether the directory IF (existPath) {let {letry {letterdirsync = fs.readdirsync (path); // Get all files in all files readdirsync.map ((item) => {let currentPath = PATH + “/” + item; let Isdirector= fs.statsync (currentpath) .Indirectory (); // Judgment is not a folder IF (isDirector && item! == “Component”) {// component directory for components need to exclude filer.push (item);} }); return filer;}};

, for example, there is an Index page item under SRC, the result of the About project traversal is [“index”, “about”];


Traversing to generate packaging portions

 / * eslint-env node * // ** * @file: getentry. JS Get entry file entry * @author: leinov * @date: 2018-10-11 * @update: 2018-11-04 Optimized portfolio method call getFilePath * / const GetFilePath = Require ("./ getFilePath"); / ** * [Get entry file entry] * * @Param {string} Path introduced root path * @returns {object} Return Entry {"About / aoubt": "./ src / about / about.js", ...} * / module.exports = function genety (path) {let entry = {}; getFilePath (path) .map ((item) => {/ ** * The following output format is {"about / about": "./ src/AOBOUT/index.js "} * This purpose is to pack JS to package JS to the corresponding folder * / entry [` $ {{} / $ {{} `] =` $ {pat} / $ {{} / Index.js`;}; return entry;};   Here we use the array acquired by GetFilePath, which is combined into one JS file in each directory. The following format of the JS entrance file. 

{“INDEX / INDEX”: “./ src / index / index.js”, “About / About “:” ./ src / about / index.js “}

Using GeTENTRY


   const geTENTRY = Require ("./ WebPackConfig / getentry); const entry = getentry (); module.exports => ({Entry: entry,}) 

In this way, we will automatically obtain entry

HTML-WebPack-Plugin Auto Configuration

Because each page needs to be configured with an HTML, and The title, keyword, description, etc. of each page may be different, so we create a pageinfo.json under each page folder, get the information through the FS module to the JSON information, and it will be generated in the corresponding HTML-WebPack-Plugin. An array of HTML plugins. EX / PAGEINFO.JSON Generate Index.html Page Information
   {"Title": "Home", "Keywords": "WebPack Multi-page"} 

About / PageInfo.json Generates About.html Page Information


{“Title”: “About Page “,” Keywords “:” WebPack Multi-page About Page “}
The HTMLWebPackPlugin array is used for WebPack to use
   


   


   

】 Traversing an HTML plugin array

/ ** * @file htmlconfig.js page HTML configuration * @author: Leinov * @Date: 2018-10 -09 * @UPDate: 2018-11-05 * @USE: Dynamically configure the HTML page, get the pageinfo.json content under each file under the SRC, resolve to htmlwebpackplugin * / const fs = request (“fs”); const HTMLWebPackPlugin = Require (“HTML-WebPack-Plugin”); // Generate HTML file const getFilePath = Require (“./ getFilePath”); let htmlarr = []; getFilePath (“./ src”). Map ((item) => {let infojson = {}, infodata = {};Try {// read the contents of the pageinfo.json file, if you don’t find PageInfo.json in the page directory, you will find an abnormality infojson = fs.readFileSync (`SRC / $ {Item} / pageinfo.json`,” UTF-8 “); // infodata = json.parse (infojson);} catch (err) {infodata = {}; htmlarr.push (new htmlwebpackplugin ({title: infodata.title? infodata.title: “Webpack, React Multi-page Architecture”, Meta: {keywords: infodata.keywords: “Webpack, React, GitHub”, Description: infodata.description? infodata.description: “This is a WebPack, React Multi-Page Architecture”}, chunks: [`$` { Item} / $ {item} `], // Introduced JS Template:” ./src/template.html “, filename: item ==” index “?” index.html “:` $ {item} / index. HTML`, // HTML position minify: {// Compressed html collapsewhitespace: true, preservelinebreaks: true},});}; module.exports = HTMLARR;


   
const path = required (“path”); const geTENTRY = Require (“./ WebPackConfig / GetEntry “); // Entrance configuration const entry = getENTRY (” ./ src “); const htmlarr = required (” ./ WebPackConfig / htmlconfig); // HTML Configuration Module.exports = (ENV, Argv) => ({ Entry: entry output: {path: path.resolve (__ dirname, ‘dist’), filename: ‘[name] .js’} …. // Other Configuration DEVSERVER: {Port: 3100, Open: true,}, Plugins: [… htmlarr]}

Such an automated complete multi-page architecture configuration is complete, if we want to create a page

1. Create a file directory under the SRC. Add index.js in the newly created file directory (must be, because it is a WebPack package file) 3. Under the new creation folder Add PageInfo.json (Non-must) Use
 4.npm Run DEV Development   
version


   
Version
Date


Note
  2.0  
2018-11-08


Optimized HTML Plugin Automation




1.0

2018-10-07

The above is all the contents of this article I hope to help everyone, I hope everyone will support Tumi Clouds.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment