改造create-react-app 通过npm命令动态打包文件

第一次写文章如果有什么不足的地方请大佬指出:joy::joy::joy::joy::joy::joy:

前言

因为公司有需求需要在做成通过 npm 命令动态打包某个文件，有一些页面是相同的可以被继承的，这样不会导致以后有一些共同的地方修改需要每一个项目都修改一遍比较麻烦（以后项目多了就太残酷了:scream::scream:） 这次项目改造踩过好多坑写出来尽量让大家少踩点:grin::grin::grin:

项目配置

创建项目

$ 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

遇到的问题

1. 在准备实行真正的项目的时候一定要保证包的版本都是对应的比如 @babel\loader 对应的babel-core
2. 有时候会报错 您需要 一个合适的loader 来加载当前的文件 多半是 用less 或者sass的时候没有配loader 或者在配置其他语法 如tsx ts等 也会提示 去找对应的loader配置上即可
3. 配置成按命令打包 可以修改entry对应的文件目录 但是src和src下的index 即使不放东西 也不可以删除因为create-react-app底层自己会找这个文件 不写的时候打包和启动服务是报错的（不知道是不是这个意思但是不写真的会报错 ）
4. 在src下想要引入外部文件的话（在src里面引入src外的文件） ModuleScopePlugin 这个包删掉就可以（估计react设置这个的目的 就是不让你乱引入目录）
5. 想要配置热更新，在entry放 require.resolve('react-dev-utils/webpackHotDevClient')
6. 使用typescript开发的时候 配置公共路径需要 在alias 和 tsconfig.json都需要配置路径 并且要对应上 报错 can not find module 是 tsconfig.json路径配置错了 can not resolve 是 webpack的 alias配置错了

终点

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