webpack 暴露配置、快捷路径配置

1. 引言

create-react-app对webpack的配置进行了封装并默认隐藏了配置文件，要对配置文件修改，如何使其暴露呢？ 有两种方法：

• npm run eject
• react-app-rewired

2. npm run eject

webpack的配置文件webpack.base.conf.js隐藏在了node_modules文件夹下的react-scripts下 可以通过以下命令将webpack配置文件暴露出来： npm run eject

• eject为不可恢复操作，输入y，即可进行eject。
• eject后，会在目录下发现几个新增的目录config，script。

webpack.config有两个，一个是dev（开发）环境下的配置文件，一个为prod（生产环境下，即npm run build的配置文件）环境下的配置文件。paths为各种路径，我们可以在这个文件中添加我们自己的路径。

这种暴露出配置入口的缺点：

• npm run eject命名不可逆，一旦配置文件暴露后就不可再隐藏
• 扩展的配置和create-react-app内建的webpack配置混合在了一起，不利于配置出现问题后的排查

3. 使用react-app-rewired再配置

react-app-rewired

安装

npm install react-app-rewired@2.0.2-next.0 --save-dev

创建文件

在项目根目录中创建config-overrides.js文件用于修改默认配置:

/* config-overrides.js */

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}

修改package.json 里的启动配置

默认配置：

改为如下：

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

4. 引入路径配置

相对路径代码的时候，经常出现路径层级较深的情况，引入起来比较麻烦，如何配置路径别名，避免'./../../'的反复书写？

1. 在webpack.config.js中添加alias 可以根据项目自行配置：

 resolve: {
    alias: {
      '@': path.resolve(__dirname, '../src')
    }
  },

import { Banner } from '../../../src/components/Banner';
就可以写成 import { Banner } from '@/components/Banner';

2. 如果开启了ESlint检查，会报错，如下解决：

eslint-import-resolver-alias安装： npm install eslint-plugin-import eslint-import-resolver-alias --save-dev

配置.eslintrc.js：

"settings": {
  'import/resolver': {
    alias: {
      map: [
        ['@', path.resolve(__dirname, './src')]
      ],
      extensions: ['.js', '.less', '.jsx']
    }
  }
},

参考文章

• 扩展create-react-app的webpack配置