改造create-react-app 通过npm命令动态打包文件
第一次写文章如果有什么不足的地方请大佬指出??????
前言
因为公司有需求需要在做成通过 npm 命令动态打包某个文件,有一些页面是相同的可以被继承的,这样不会导致以后有一些共同的地方修改需要每一个项目都修改一遍比较麻烦(以后项目多了就太残酷了??) 这次项目改造踩过好多坑写出来尽量让大家少踩点???
项目配置
创建项目
$ mkdir my-app $ cd my-app$ npm init -y
复制代码
目录结构
|- config //webpack配置文件目录|- config-overrides.js //在这个文件向下分发webpack的方法|- src //源文件
复制代码
编写webpack文件
$ cd config $ touch paths.js $ touch webpack.dev.js $ touch webpack.pro.js
复制代码
配置config-overrides.js
/***config webpack配置*env 环境变量/
const Dev = require("./config/webpack.dev");
const Pro = require("./config/webpack.pro");
module.exports = function override(config,env){let iden = process.argv[2] //打包的文件标识if (env == "development") {return Dev(config, env,iden)} else {return Pro(config, env,iden)}
}
复制代码
配置paths.js
const path = require('path');
const fs = require('fs');
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = (iden) =>{return {appSrc: resolveApp(`src/${type}`)}
}
复制代码
开发环境需要配置的 webpack.dev.js
module.exports = (config,env,iden) =>{//进行webpack的重写配置 配置一些 sass typescript。。。config.entry = [`${paths(type).appSrc}/index.js` //动态改变webpack的打包路径 (注意改变的是src下的,因为webpack默认会找src,而且src下的index.js也不可以修改名字)]return config //更改完配置记得return
}
复制代码
生产环境配置同上 不同的是可能有一些对js css的处理不一样 (这里就不写了 )
安装包
/*** react-scripts 重写配置* react-app-rewired 执行命令* rimraf 删除包
*/
$ npm i -D react-app-rewired react-scripts rimraf //这两个主要是配合react-scripts重写配置
复制代码
更改 package.json
启动命令 npm start "标识"
遇到的问题
- 在准备实行真正的项目的时候一定要保证包的版本都是对应的比如 @babel\loader 对应的babel-core
- 有时候会报错 您需要 一个合适的loader 来加载当前的文件 多半是 用less 或者sass的时候没有配loader 或者在配置其他语法 如tsx ts等 也会提示 去找对应的loader配置上即可
- 配置成按命令打包 可以修改entry对应的文件目录 但是src和src下的index 即使不放东西 也不可以删除因为create-react-app底层自己会找这个文件 不写的时候打包和启动服务是报错的(不知道是不是这个意思但是不写真的会报错??)
- 在src下想要引入外部文件的话(在src里面引入src外的文件) ModuleScopePlugin 这个包删掉就可以(估计react设置这个的目的 就是不让你乱引入目录)
- 想要配置热更新,在entry放 require.resolve('react-dev-utils/webpackHotDevClient')
- 使用typescript开发的时候 配置公共路径需要 在alias 和 tsconfig.json都需要配置路径 并且要对应上 报错 can not find module 是 tsconfig.json路径配置错了 can not resolve 是 webpack的 alias配置错了
终点
最基础的东西就这些,如果有什么想加的根据自己的需求增加对应的东西就可以 希望可以帮助到大家
最后贴一张喜欢的超级英雄 ??
转载于:https://juejin.im/post/5cecd16bf265da1bbd4b549b
改造create-react-app 通过npm命令动态打包文件相关推荐
- Vite 3.0 vs. Create React App:比较和迁移指南
Create React App (CRA) 在 React 社区及其整个生态系统的发展中发挥了关键作用. 在突发奇想构建本地 React 开发环境时,它是不同技能的开发人员的首选工具. CRA 拥有 ...
- 【翻译】基于 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 DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
- 深入浅出 Create React App
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- Create React App从使用到Docker部署
一.介绍 Create React App 是 React 脚手架,它帮我们可以快速生成项目的工程化结构,脚手架让项目从搭建到开发再到部署,整个流程变得快速和便捷. 二.安装 Create React ...
- react快速开始(二)-使用脚手架Create React App创建react应用
文章目录 react快速开始(二)-Create React App入门 什么是Create React App 快速开始 使用IDE webstrom创建react项目 create react a ...
- Create React App 2.0 华丽登场
贺! Create React App 2.0 在 10/02 正式发布 ?????? Create React App 是由官方所维护的开发工具,主要提供了专属于 React 开发环境的前置工作.简 ...
- Create React App 2.0 正式发布:Babel 7、webpack 4 等
英文原文:Create React App 2.0: Babel 7, Sass, and More – React Blog 以下是简要翻译 React 本身是没有附带任何编译工具的,如果没有测试运 ...
最新文章
- 是否可以人为修改发表时间
- Silverlight运行原理经典问答。
- monty python喜剧-经典喜剧电影推荐:巨蟒与圣杯
- linux下改变python的版本
- 智能循迹避障小车C语言程序编写思路,基于单片机的智能小车红外避障循迹系统设计与制作...
- 52个有效方法(1) - 了解Objective-C语言的起源
- cydia软件路径_cydia软件包路径
- 使用JMeter进行压力测试
- Magick.NET图片处理:解决png转jpg背景色为黑色的问题(设置背景色)
- python换照片底色,20行代码教你用python给证件照换底色的方法示例
- 作为架构师,你必需要搞清楚的概念:POJO、PO、DTO、DAO、BO、VO
- C语言基础知识 ---------- 指针(pointer)、结构(structure)、字串(Char)
- 如何在Excel中将文件大小中有GB、MB的信息转化成统一格式
- python之arp欺骗
- 【POJ 1788 --- Building a New Depot】
- 骨传导原理是什么?骨传导耳机的利弊
- UI 自动化中的分层设计
- 菜鸟初学JQuery
- 转:海外购之Amazon亚马逊购物手把手教程
- 补天SRC漏洞挖掘(一):主域名爬取
热门文章
- 斯伦贝谢好进吗_在斯伦贝谢工作是怎样的体验?
- python的作用域 gbel_[ python ] 全局和局部作用域变量的引用
- android开发app初始化,Android 的 Application 初始化
- 最新中烟新商盟JS逆向分析实战教程
- Docker安装宝塔没想到竟然如此之简单~
- SOA技术相关介绍(RPC, Web Service, REST,SOAP,JMI)
- IE、FireFox、Opera三种浏览器Document对象的方法对比
- mysql 主从复制 博客园_mysql主从复制
- 如何做相册_今天才知道,原来长按微信相册,还隐藏着一个实用功能
- 通信原理眼图画法_通信原理课程总结(二)