customize-cra修改默认端口以及文件输出路径

现在react如果使用create-react-app脚手架开发,搭建项目会更快些,但是webpack配置项修改，确实让人头疼。
1.方案1: 直接执行package.json指令，将所有webpack配置项都暴露出来,然后挨个改，显然这种方式对于大项目对自定义webpack有强烈要求的话可以这么做，但全部暴露显的项目代码文件更多，可能对一些小项目不是那么友好。

 "scripts": {
    "eject": "react-scripts eject"
  },

2.方案2 使用react-app-rewired/customize-cra修改原来的create-react-app的配置项，这种方式因为改动小，所以在这主要推荐这种方式处理一些快速搭建的项目，对自定义webpack没有太多要求，而且关注快速开发。
首先安装一下：react-app-rewired/customize-cra

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

修改package.json的指令
修改默认端口：此处修改开发环境端口,只能通过 PORT=8888类似这种方式修改才能生效

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

在当前根目录下新建config-overrides.js，可以修改create-react-app已经内置的webpack配置

修改打包输出路径output:

 webpack: override(
    (config, env) => {
      // 修改打包输出output
      if (env === "production") {
        config.output.path = path.resolve(
          __dirname,
          "../express-generator/public"
        );
      })

大概简单的config-overrides.js配置可以简单参考：

const {
  override,
  disableEsLint,
  overrideDevServer,
  watchAll,
  addWebpackAlias,
  setWebpackPublicPath,
  addWebpackPlugin,
} = require("customize-cra");
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");

const addServerConfig = (config) => {
  console.log("devServer", config);
  return {
    ...config,
    proxy: {
      "/api": {
        target: "https://xxx.com",
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  };
};

module.exports = {
  webpack: override(
    (config, env) => {
      // 修改打包输出output
      if (env === "production") {
        config.output.path = path.resolve(
          __dirname,
          "../express-generator/dist"
        );
      }
      
      return config;
    },
    // usual webpack plugin
    disableEsLint(),

    // 修改publicPath的访问路径:那么每个html引入资源路径都带有 /web/react-project/**.css
    // setWebpackPublicPath('/web/react-project'),

    // 别名配置
    addWebpackAlias({
      "@": path.resolve(__dirname, "./src"),
    })

    // 配置webpackPlugin
    //addWebpackPlugin(plugin)添加webpack插件，会被合并到plugins数组中
    // addWebpackPlugin(new htmlWebpackPlugin({
    //   title:'测试网页',
    //   template: 'index.html', // 源模板文件
    //   filename: './index.html', // 输出文件【注意：这里的根路径是module.exports.output.path】
    //   chunks: ["common",'index']
    // }))
  ),
  devServer: overrideDevServer(addServerConfig, watchAll()),
};