快捷導(dǎo)航

Create?react?app修改webapck配置導(dǎo)入文件alias

更新時(shí)間：2023年12月25日 14:21:23 作者：chenqy9

這篇文章主要為大家介紹了Create?react?app修改webapck配置導(dǎo)入文件alias,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

create react app

create-react-app是 react 的官方項(xiàng)目腳手架，可以幫我們快速的搭建一個(gè) react 項(xiàng)目。了解 vue 的同學(xué)應(yīng)該知道，vue的官方腳手架是默認(rèn)支持@到src的絕對路徑引用，可以優(yōu)雅高效的引用其它模塊，特別是跨目錄，深嵌套的引用。而且vue把webpack的配置文件暴露出來，可以很方便的對webapck進(jìn)行個(gè)性化的配置修改。

相比之下，create react app生成的項(xiàng)目，默認(rèn)還是用相對路徑的引入，而且把webpack的配置深度集成到腳本里面，如果需要個(gè)性化的修改配置，只能通過react-scripts eject來導(dǎo)出wenpack配置，而且修改之后就只能自己維護(hù)了，一些我們不需要修改的react官方默認(rèn)配置可能就會丟失。我們可以通過以下兩個(gè)插件來優(yōu)雅的修改create react app生成的項(xiàng)目配置，以修改導(dǎo)入路徑alias為例說明。

react app rewired

react-app-rewired

安裝插件

npm install react-app-rewired --save-dev

創(chuàng)建 config-overrides.js

/* config-overrides.js */
const path = require('path');
module.exports = {
  webpack: function(config, env) {
    config.resolve.alias['@'] = path.resolve(__dirname, 'src');
    return config;
  },
  jest: function(config) {
    const {
      moduleNameMapper = {},
    } = config;
    config.moduleNameMapper = {
      ...moduleNameMapper,
      '^@/(.*)$': '<rootDir>/src/$1',
    };
    return config;
  }
}

修改 react-scripts 的默認(rèn)npm腳本

/* package.json */

"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test",
   "eject": "react-scripts eject"
}

@craco/craco

安裝

npm i -D @craco/craco

創(chuàng)建 craco-config.js 文件

const path = require('path');
module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.resolve.alias['@'] = path.resolve(__dirname, 'src');
      return webpackConfig;
    },
  },
  jest: {
    configure: (jestConfig) => {
      const {
        moduleNameMapper = {},
      } = jestConfig;
      jestConfig.moduleNameMapper = {
        ...moduleNameMapper,
        '^@/(.*)$': '<rootDir>/src/$1',
      };
      return jestConfig;
    },
  }
};

修改 react-scripts 的默認(rèn)npm腳本

/* package.json */

"scripts": {
   "start": "craco start",
   "build": "craco build",
   "test": "craco test",
   "eject": "react-scripts eject"
}

總結(jié)

我們可以通過 react-app-rewired 和 @craco/craco 兩個(gè)插件優(yōu)雅的修改 create-react-app 生成的項(xiàng)目配置。兩個(gè)插件的使用方法都差不多，也都可以實(shí)現(xiàn)我們的需求，至于使用哪一個(gè)見仁見智。我建議是用@craco/craco，比較新，react-app-rewired最后的更新已經(jīng)是兩年前了。

以上就是Create react app修改webapck配置導(dǎo)入文件alias的詳細(xì)內(nèi)容，更多關(guān)于Create react app修改webapck的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: