This year, the company has been implementing separate front-end and back-end development. There was a demand for active development, so it decided to implement it with react Multi-page application. The project was developed on the basis of create-React-app (@3.0.1) scaffolding.

The preparatory work

Download and install the create-react-app(@3.0.1, other versions may be slightly different) scaffolding and decompile all CRA configurations into the current project (see juejin.cn/post/684490…

Create folder specification constraints

The specification is as follows (refer to the folder specification of wechat applets)

Modify the WebPack configuration

First modify the paths.js file in config folder and add the following functions:

// Add method to get multi-page HTML template
const getMultiPageHtml = (filePath) = > {
  return globby.sync(filePath, {
          expandDirectories: {
            files: ['*.html']
          }
        })
        .reduce((arr, file) = > {
          let key = file.replace(/(^src\/|\.html$)/g.' ');
          return arr.concat([[ 
            key,                        // import chunk key (use file path to ensure key uniqueness)
            resolveApp(file),            //html template url
            resolveApp(`src/${key}.js`)  // Entry js file url]])}, []); }Copy the code

New multiPageList value in paths.js export value:

Modify the webpack.config.js file and add the following functions:

  // Added to get multi-page configuration
  const getMultiPageConfig = (files) = > {
    return files.reduce((data, file) = > {
      const [key, template, appJs] = file;
      if( fs.existsSync( appJs ) ){
        data.entryJs[key] = [
          isEnvDevelopment &&
            require.resolve('react-dev-utils/webpackHotDevClient'),
          appJs
        ].filter(Boolean);
        data.htmlPlugins.push(
          new HtmlWebpackPlugin(
            Object.assign(
              {},
              {
                inject: true.chunks: [key],
                template: template,
                filename: `${key}.html`
              },
              isEnvProduction
                ? {
                    minify: {
                      removeComments: true.collapseWhitespace: true.removeRedundantAttributes: true.useShortDoctype: true.removeEmptyAttributes: true.removeStyleLinkTypeAttributes: true.keepClosingSlash: true.minifyJS: true.minifyCSS: true.minifyURLs: true,}} :undefined)))}return data;
    }, {
      entryJs: {},htmlPlugins: []})}const { entryJs, htmlPlugins } = getMultiPageConfig(paths.multiPageList);

Copy the code

Then modify the entry and plugins configuration items:

This completes a crA-BASED multi-page application WebPack configuration, and other configuration optimizations can be adjusted to suit your needs.

Advantages of the current configuration

  • After configuration, there is no need to manually add the entry file and htmlWebpackPlugin, as long as it can be automatically generated according to the file directory specification.
  • Multi-layer folders are supported. The generated folders have the same structure as the source folders.

disadvantages

  • Due to the small number of pages of current development activities, no problems have been found. If you have any problems in use, please leave a message to discuss.