what

This article focuses on how to quickly build a multi-page application using Dawn.

why

A single page has many advantages and disadvantages. The current situation of our company is more suitable for the use of multi-page applications, which not only improves the development efficiency, ensures user experience, but also greatly compatible with the original PHP system.

how

  1. Second one, prepare the raw materials

    $ npm install dawn -g
$ mkdir demoCopy the code

  2. Second, initialize the application

    // react
$ dn init -t reactCopy the code
  3. Third, multi-page configuration

    in./srcIn, copy and modify index.js to the desired page name. Of course, it can also be a single page application without copying or modifying it.dawnIt will automatically read./srcIn thejsAs an entry (excluding subdirectories)js)

At this point, the multi-page application has been built

extra

Based on this, I made some additional configurations

  • State management solutions refer to this articleUse Dawn engineering tools to practice MobX data flow management scheme”Or maybe it’s because this article is notMobxGood practice, I founddawnThis tool

  • Height configure webpack and create webpack.config.js under./. Here’s an example:

    Module. exports = function(configs,webpack, CTX){//configs is the default configuration, It can be modified here //webpack current webpack instance // CTX current build "context instance" configs.plugins.push(new webpack.defineplugin ({"process.env": { NODE_ENV: JSON.stringify("production") } })); };Copy the code

  • Move the entry files to the pages folder under new./ SRC and change the dev and Build webpack items under./.dawn/pipe.yml

    entry: ./src/pages/*.jsCopy the code
  • Modify the./src/assets/*.htmlAdd content required by the business