改造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 "標識"

遇到的問題

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配置錯了

終點

---

最基礎的東西就這些，若是有什麼想加的根據本身的需求增長對應的東西就能夠 但願能夠幫助到你們

最後貼一張喜歡的超級英雄 😎😎