改造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配置错了

终点

最基础的东西就这些，如果有什么想加的根据自己的需求增加对应的东西就可以希望可以帮助到大家