Saltar al contenido

¿Cómo servir varios archivos HTML con React?

este problema se puede tratar de diferentes formas, sin embargo te compartimos la que para nosotros es la respuesta más completa.

Solución:

si estas usando create react app debes eject su proyecto primero porque debe cambiar su punto de entrada en la configuración de Webpack

primero eject (si no tiene el archivo de configuración del paquete web)

    npm run eject 

y luego ir al archivo de configuración

en webpack.config.js

entry: 
    index: [
      require.resolve('react-dev-utils/webpackHotDevClient'),
      require.resolve('./polyfills'),
      require.resolve('react-error-overlay'),
      paths.appIndexJs,
    ],
    admin:[
      require.resolve('react-dev-utils/webpackHotDevClient'),
      require.resolve('./polyfills'),
      require.resolve('react-error-overlay'),
      paths.appSrc + "/admin.js",
      ]
  ,
  output: 
    path: paths.appBuild,
    pathinfo: true,
    filename: 'static/js/[name].bundle.js',
    chunkFilename: 'static/js/[name].chunk.js',
    publicPath: publicPath,
    devtoolModuleFilenameTemplate: info =>
      path.resolve(info.absoluteResourcePath),
  ,

después de eso, debe agregar el complemento Wepack y agregarlo a su proyecto

 new HtmlWebpackPlugin(
      inject: true,
      chunks: ["index"],
      template: paths.appHtml,
    ),
    new HtmlWebpackPlugin(
      inject: true,
      chunks: ["admin"],
      template: paths.appHtml,
      filename: 'admin.html',
    ),

también deberías reescribir las URL

historyApiFallback: 
      disableDotRule: true,
      // 指明哪些路径映射到哪个html
      rewrites: [
         from: /^/admin.html/, to: '/build/admin.html' ,
      ]
    

puede leer esta página para obtener más información http://imshuai.com/create-react-app-multiple-entry-points/

Valoraciones y comentarios

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *