关于最新create-react-app使用react-app-rewired2.x添加webpack配置

使用过create-react-app（如下简称cra）的朋友都知道，这是react官方的一款脚手架工具，内部集成了babel，webpack，webpack-dev-server等等。

之前咱们要在cra中作webpack的配置，有三种方式：

一、运行npm run eject获得原始的webpack配置文件config，而后能够看到里面有prod和dev两个环境的相关配置；可是新版本cra你run eject以后，只有一个webpack.config.js文件了。

能够在这里面进行配置。可是本文中这不是咱们推荐的方式。

二、不run eject。而是改写script文件中的js。这个本人没有操做过，这个就不详谈了。

三、使用react-app-rewired，安装这个工具后，在项目根目录中新建文件config-overrides.js文件。此时咱们即可以在其中进行各类webpack的骚操做了~

可是！react-app-rewired2.x之后，再也不支持injectBabelPlugin的方式，须要安装customize-cra。

具体的，ant design官方文档已经给出了最新的解决方案。请前往详览。https://ant.design/docs/react/use-with-create-react-app-cn

这种方式就是咱们推荐的方式。由于无需生成更多额外的文件，同时配置又趋于更简单可控的方式。

接下来咱们就来具体说一下操做步骤。

首先，咱们安装react-app-rewired。

$ yarn add react-app-rewired

而后修改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",
}

接着，安装customize-cra

$ yarn add customize-cra

而后在根目录下添加config-overrides.js文件。

module.exports = function override(config, env) {
  // 关于webpack的相关配置
  return config;
};

好了，基本的操做就是这样。下面咱们再来讲具体到咱们的项目中，须要作的一些配置。

一、react项目中咱们最经常使用的组件库antd，咱们须要配置按需加载。

使用babel-plugin-import，它是一个用于按需加载组件代码和样式的 babel 插件。

安装

$ yarn add babel-plugin-import

接着配置webpack 

/* config-overrides.js */
+ const { override, fixBabelImports } = require('customize-cra');

- module.exports = function override(config, env) {
-   return config;
- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );

这样咱们在组件中就能够按需引入组件库中所须要的组件了。

二、自定义主题

按照配置主题的要求，自定义主题须要用到 less 变量覆盖功能。

安装less和less-loader

$ yarn add less less-loader

配置webpack

/* config-overrides.js */
- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
-   style: 'css',
+   style: true,
  }),
+ addLessLoader({
+   javascriptEnabled: true,
+   modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);

这里利用了less-loader的modifyVars来进行主题配置。固然这里的modifyVars的值也能够是一个theme文件。

三、打包后咱们会发现静态文件夹中会有不少的css和js的map文件，那么咱们该怎么关闭sourcemap呢？

/* config-overrides.js */

const { override, fixBabelImports, addLessLoader } = require("customize-cra");

+ process.env.GENERATE_SOURCEMAP = "false";

module.exports = override(
  fixBabelImports("import", {
    libraryName: 'antd',
    libraryDirectory: "es",
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' },
  })
);

ok，再次执行npm run build便不会产生map文件了。

还看到一种解决的方式以下，

const rewiredMap = () => config => {
    config.devtool = config.mode === 'development' ? 'cheap-module-source-map' : false;
    return config;
};

module.exports = override(
    // 关闭mapSource
    rewiredMap()
);

参考地址：https://segmentfault.com/q/1010000018123194

四、最后咱们来讲说前端本地proxy的配置

开发中常见的问题就是跨域。那么咱们前端惯用的方式就是给本地webpack启动的node服务设置代理。

那么具体到使用了新版的cra后，咱们该怎么办呢？

很简单，在src目录下新建文件setupProxy.js（注意文件名必定要是这个名字，不要问什么，cra如今废弃了proxy对象配置的方式，将其做为单独模块。解析就是按 src/setupProxy.js这个路径）

安装http代理相关包http-proxy-middleware

$ yarn add http-proxy-middleware -D

配置以下，

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy('/api', {
      target: 'http://xx.xx.xx.xx:8000/',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    })
  )
}

好了，如今你就能够愉快的访问接口了~

关于更多的customize-cra配置，你们能够自行查看文档。https://github.com/arackaf/customize-cra