React脚手架实现多页面应用

搭建项目内容

配置paths.js

 appHtml: resolveApp('public/index.html'),
  appQueryHtml: resolveApp('public/query.html'),
  appOrderHtml: resolveApp('public/order.html'),
  appTicketHtml: resolveApp('public/ticket.html'),
  appIndexJs: resolveModule(resolveApp, 'src/index/index'),
  appQueryJs: resolveModule(resolveApp, 'src/query/index'),
  appTicketJs: resolveModule(resolveApp, 'src/ticket/index'),
  appOrderJs: resolveModule(resolveApp, 'src/order/index'),

配置webpack.config.js

entry入口配置

entry: {
      index: [
        isEnvDevelopment &&
        require.resolve('react-dev-utils/webpackHotDevClient'),
        paths.appIndexJs,
      ].filter(Boolean),
      query: [
        isEnvDevelopment &&
        require.resolve('react-dev-utils/webpackHotDevClient'),
        paths.appQueryJs,
      ].filter(Boolean),
      ticket: [
        isEnvDevelopment &&
        require.resolve('react-dev-utils/webpackHotDevClient'),
        paths.appTicketJs,
      ].filter(Boolean),
      order: [
        isEnvDevelopment &&
        require.resolve('react-dev-utils/webpackHotDevClient'),
        paths.appOrderJs,
      ].filter(Boolean)
    },

Plugins 中 HtmlWebpackPlugin了多页面模板配置

new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            template: paths.appHtml,
            fileName: 'index.html',
            chunks: ['index']
          },
          isEnvProduction
            ? {
                minify: {
                  removeComments: true,
                  collapseWhitespace: true,
                  removeRedundantAttributes: true,
                  useShortDoctype: true,
                  removeEmptyAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  keepClosingSlash: true,
                  minifyJS: true,
                  minifyCSS: true,
                  minifyURLs: true,
                },
              }
            : undefined
        )
      ),
       new HtmlWebpackPlugin(
         Object.assign({}, {
             inject: true,
             template: paths.appQueryHtml,
             fileName: 'query.html',
             chunks: ['query']
           },
           isEnvProduction ?
           {
             minify: {
               removeComments: true,
               collapseWhitespace: true,
               removeRedundantAttributes: true,
               useShortDoctype: true,
               removeEmptyAttributes: true,
               removeStyleLinkTypeAttributes: true,
               keepClosingSlash: true,
               minifyJS: true,
               minifyCSS: true,
               minifyURLs: true,
             },
           } :
           undefined
         )
       ),
        new HtmlWebpackPlugin(
          Object.assign({}, {
              inject: true,
              template: paths.appTicketHtml,
              fileName: 'ticket.html',
              chunks: ['ticket']
            },
            isEnvProduction ?
            {
              minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeStyleLinkTypeAttributes: true,
                keepClosingSlash: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true,
              },
            } :
            undefined
          )
        ),
         new HtmlWebpackPlugin(
           Object.assign({}, {
               inject: true,
               template: paths.appOrderHtml,
               fileName: 'order.html',
               chunks: ['order']
             },
             isEnvProduction ?
             {
               minify: {
                 removeComments: true,
                 collapseWhitespace: true,
                 removeRedundantAttributes: true,
                 useShortDoctype: true,
                 removeEmptyAttributes: true,
                 removeStyleLinkTypeAttributes: true,
                 keepClosingSlash: true,
                 minifyJS: true,
                 minifyCSS: true,
                 minifyURLs: true,
               },
             } :
             undefined
           )
         ),

Plugins中 插件 MainfestPlugin进行多页面配置，去掉generate配置项

new ManifestPlugin({
        fileName: 'asset-manifest.json',
        publicPath: paths.publicUrlOrPath
        // generate: (seed, files, entrypoints) => {
        //   const manifestFiles = files.reduce((manifest, file) => {
        //     manifest[file.name] = file.path;
        //     return manifest;
        //   }, seed);
        //   const entrypointFiles = entrypoints.main.filter(
        //     fileName => !fileName.endsWith('.map')
        //   );

        //   return {
        //     files: manifestFiles,
        //     entrypoints: entrypointFiles,
        //   };
        // },
      }),