create-react-app创建的项目配置多入口MPA模式。报Cannot read property ‘filter’ of undefined

多入口配置
一.首先eject项目
执行npx create-react-app train-ticket,安装react项目。这时候package.json中react-srcipt已经集成了所有的逻辑，此时需要个性化的配置，需要执行npm run eject，将webpack配置文件拉出，并执行npm install安装依赖。执行完上述命令之后，文件树如图所示

二.配置webpack文件
①在config/webpack.config首先找到配置文件入口entry处，这里只配置一个入口文件，要将这里改成多入口的模式，因此应该将这里改成对象的形式。

    entry:[paths.appIndexJs, isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient')].filter(Boolean),

给每一个不同的入口起不同的名字

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

②这里的入口文件的路径写在paths文件中，因此到config/paths中添加这几个变量。在项目中这几个文件被放在新建的单独的文件夹中，分别放在index，order，ticket，query中的index.js中。

在path中添加如下变量

appIndexJs: resolveModule(resolveApp, 'src/index/index'),
appQueryJs: resolveModule(resolveApp, 'src/query/index'),
appTicketJs: resolveModule(resolveApp, 'src/ticket/index'),
appOrderJs: resolveModule(resolveApp, 'src/order/index'),

③最后修改HtmlWebpackPlugin，生成四个不同的html引入这些入口打包后的文件。生成几个页面，就要配置几个HtmlWebpackPlugin，filename为最后的html名称，chunkwei所引用的打包文件。

      new HtmlWebpackPlugin(Object.assign({},{inject: true,template: paths.appHtml,filename: 'index.html',chunk: ['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.appHtml,filename: 'query.html',chunk: ['query'],},isEnvProduction? {minify: {removeComments: true,collapseWhitespace: true,removeRedundantAttributes: true,useShortDoctype: true,removeEmptyAttributes: true,removeStyleLinkTypeAttributes: true,keepClosingSlash: true,minifyJS: true,minifyCSS: true,minifyURLs: true,},}: undefined)),

在这里同样需要四个html模板，在public目录下创建，并在config/paths文件中指定路径。

  appHtml: resolveApp('public/index.html'),appQuery: resolveApp('public/query.html'),appTicket: resolveApp('public/ticket.html'),appOrder: resolveApp('public/iorder.html'),

三.运行打包命令
当配置完之后，运行打包命令，控制台报错，Cannot read property ‘filter’ of undefined，起初以为是entry里面的filter报错，后来发现entry里面就算不写filter也是会报错，最后定位到错误原因在ManifestPlugin

ManifestPlugin这个插件的作用是生成一份.json的文件，通过该文件的映射关系可以让我们知道webpack是如何追踪所有模块并映射到输出bundle中的。我们先来看原始的配置,这里fileName设置了输出文件名asset-manifest.json，publicPath设置了输出路径，最终要的是最后一个generate参数，自定义了输出的内容，里面有一段是取entrypoints.main，这是针对单一入口的配置，因为单一入口不指定name的情况默认name为main，当改成多入口的方式了之后这里面在entrypoints中自然是读取不到main这个值的，因此就报错，这里将generate这个参数去掉，恢复其默认值即可，或者将entrypoints这个key去掉。

 new ManifestPlugin({fileName: 'asset-manifest.json',publicPath: publicPath,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,};},}),

如图所示为单入口的entrypoints对象

如图所示为打印出修改多入口后的的entrypoints对象

create-react-app创建的项目配置多入口MPA模式。报Cannot read property ‘filter’ of undefined相关推荐

create react app创建的项目运行test的时候不能解析webpack的alisa配置的问题
使用babel插件npm install babel-plugin-module-resolver,并在.babelrc文件中加入如下: {"plugins": [["m ...
react快速开始(二)-使用脚手架Create React App创建react应用
文章目录 react快速开始(二)-Create React App入门什么是Create React App 快速开始使用IDE webstrom创建react项目 create react a ...
如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
Create React App proxy配置
最近又吃了没文化的亏(哭晕在洗手间≧ ﹏ ≦) 做后台管理系统的时候,需要调一个易连云打印小票的接口, 项目框架是 Create React App+typescript,后端是node.js 本媛负 ...
Create React App来搭建react项目
版本过旧请参考此网址更新:Getting Started | Create React App npx create-react-app my-app 备注:react使用比较自由,不限制多或者少,愿 ...
【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）
基于 Create React App路由4.0的异步组件加载本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...
深入浅出 Create React App
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
Vite 3.0 vs. Create React App：比较和迁移指南
Create React App (CRA) 在 React 社区及其整个生态系统的发展中发挥了关键作用. 在突发奇想构建本地 React 开发环境时,它是不同技能的开发人员的首选工具. CRA 拥有 ...

create-react-app创建的项目配置多入口MPA模式。报Cannot read property ‘filter’ of undefined

create-react-app创建的项目配置多入口MPA模式。报Cannot read property ‘filter’ of undefined

create-react-app创建的项目配置多入口MPA模式。报Cannot read property ‘filter’ of undefined相关推荐

最新文章

热门文章