use react-app-rewired without CRA

[ishanajmeri]

want to use react-app-rewired npm package with my project who doesn't have a script of "react-app-rewired start".

this is my package.json file:

{
  ///
   script:{
      ///
      "watch": "webpack-dev-server",
      /// 
   }   
 ///  
}

I can start my server by sudo yarn watch. so I can't rewrite it with react-app-rewired start.

this is my config-overrides.js file:

const path = require("path");
const {
    override,
    fixBabelImports,
    addLessLoader,
    addWebpackPlugin
} = require("customize-cra");
const AntDesignThemePlugin = require("antd-theme-webpack-plugin");

const options = {
    stylesDir: path.join(__dirname, "./src/styles"),
    antDir: path.join(__dirname, "./node_modules/antd"),
    varFile: path.join(__dirname, "./src/styles/vars.less"),
    themeVariables: ["@primary-color"],
    // indexFileName: "index.html"
};

module.exports = override(
    fixBabelImports("antd", {
        libraryName: "antd",
        libraryDirectory: "es",
        style: true
    }),
    addWebpackPlugin(new AntDesignThemePlugin(options)),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true
        }
    })
);

I can also use webpack.config.js file. if anyone know how I can add this config in that file most welcome. thank you!

[dawnmist]

How is your project created?

If it's not a create-react-app based project, you don't need react-app-rewired. You would just make the changes in your webpack config files themselves.

Create-react-app prevents you from modifying the webpack configuration - that's why react-app-rewired exists to allow some customization without having to stop using CRA. If you do not have a CRA project, react-app-rewired is not going to be of use to you. React-app-rewired uses the CRA build/start/test scripts and injects additional configuration into those scripts - if your project doesn't use those scripts from CRA then react-app-rewired will not work.

The rewires you have mentioned above are all inside customize-cra. I'd suggest you go and read the code for those particular rewires at customize-cra to see exactly how they are modifying the webpack config with each of those rewires. Where the rewire takes a config parameter, that is the main webpack config that will be being returned in your webpack.config.js file, so whatever changes are made to that config variable are the ones you need to make in your webpack.config.js file.

The team at customize-cra are in a better position to explain what the rewires do than I am.

[ishanajmeri]

@dawnmist thanks for the reply. I'll dig something in customize-cra and see if I can get something out of it.