create-react-app配置多页应用（个人笔记，非教程）

最新推荐文章于 2024-04-20 03:20:13 发布

追寻着星星的方向

最新推荐文章于 2024-04-20 03:20:13 发布

阅读量329

点赞数 1

分类专栏： react

本文链接：https://blog.csdn.net/qq_44408123/article/details/102532069

版权

react 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

配置多页应用相当于配置多个项目，单页应用相当于值配置一个项目，
执行命令

npm run eject

config/paths.js

module.exports = {
	// 这些是默认
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  // 这些是默认 end
	//多个应用的配置
  appHtml: resolveApp('public/index.html'),
  appQuery: resolveApp('public/query.html'),
  appTicket: resolveApp('public/ticket.html'),
  appOrder: resolveApp('public/order.html'),
  appIndexJs: resolveModule(resolveApp, 'src/pages/index/index'),
  appQueryJs: resolveModule(resolveApp, 'src/pages/query/index'),
  appTicketJs: resolveModule(resolveApp, 'src/pages/ticket/index'),
  appOrderJs: resolveModule(resolveApp, 'src/pages/order/index'),
	//多个应用的配置 end
  
  // 这些是默认
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  appTsConfig: resolveApp('tsconfig.json'),
  appJsConfig: resolveApp('jsconfig.json'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
  proxySetup: resolveApp('src/setupProxy.js'),
  appNodeModules: resolveApp('node_modules'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),
  // 这些是默认 end
};

config/webpack.config

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

 output: {
      // The build folder.
      path: isEnvProduction ? paths.appBuild : undefined,
      // Add /* filename */ comments to generated require()s in the output.
      pathinfo: isEnvDevelopment,
      // There will be one main bundle, and one file per asynchronous chunk.
      // In development, it does not produce real files.
      filename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].js'
        : isEnvDevelopment && 'static/js/[name].js',//这一行需要修改，固定写法

同时在plugins配置项中复制几个 HtmlWebpackPlugin，其中需要更改的部分为

new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            template: paths.appHtml,
            filename:"index.html",//HTML的文件
            chunks:["index"]// 需要引入js文件名的开头
          },