react项目修改默认配置

在react项目中修改webpack配置文件

在通过create-react-app创建的react项目中想要修改一些配置是比较难的，在日常学习和工作中我总结了以下两种方法

1. 通过react-app-rewired和customize-cra修改

• 首先安装相应的包，可以通过yarn的方式也可以是npm的方式。

    $ yarn add react-app-rewired customize-cra
  

• 修改package.json文件

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

• 然后在项目根目录创建一个名为 config-overrides.js 的文件，在这个js文件中就可以修改,添加一些webpack的配置

const { override, addWebpackAlias } = require('customize-cra')
const path = require('path')

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

module.exports = override(
  //配置路径别名
  addWebpackAlias({
    ['assets']: path.resolve(__dirname, './src/assets'),
    ['utils']: path.resolve(__dirname, './src/utils'),
    ['components']: path.resolve(__dirname, './src/components'),
    ['context']: path.resolve(__dirname, './src/context')
  })
)

2.通过eject方法(不推荐)

当你想要修改一些webpack配置而使用上述方法无法解决，例如配置scss，可以通过eject方法。当Create React App变化时，特别是它使用的react-scripts包变化时，很有可能导致我们的代码需要一些修复。如果官方修改了webpack的结构，或者导出方式，我们的代码将出现问题，这时就需要你自己去了解如何修复它们。而且这个操作不可逆的！

• 首先要在本地或者远端仓库保存代码以便eject操作错误后回退(虽然eject是不可逆的，但是我们可以通过这种方式保存我们eject之前的代码)。当你没有进行上述操作时会报错：
  
  
• 之后再运行eject就会正常弹出，弹出之后你的项目会多处几个文件夹，修改webpack配置在config文件夹下的webpack.config.js，然后就可以修改webpack配置了，例如配置scss(配置scss别忘了装前置依赖)。

    module: {
      strictExportPresence: true,
      rules: [
      //.......弹出后module下默认有很多配置，此处省略
        {
          //匹配文件的后缀
          test: /\.s[ac]ss$/i,
          use: [
            // Creates `style` nodes from JS strings
            'style-loader',
            // MiniCssExtractPlugin.loader,
            // Translates CSS into CommonJS
            'css-loader',
            // Compiles Sass to CSS
            'sass-loader',
          ],
        },
      ],
    },