How to integrate WebPack in a VisualStudio solution with many projects

Question

In a VisualStudio solution I have several (perhaps a lot of) projects. Now I want to add some web pages with React and Webpack. After some experimentation with small standalone react projects, it seems like I should create the package.json file at the root of the solution, outside of the projects. This should lead to a single node_modules folder that can be shared by several react projects.

Then, where the.jsx file(s) is, I should create the webpack.config.xxx.js file. Later, when I add another react app, I could have another webpack.config.yyy.js file.

To start the react build process, I already experimented with a.BAT file with a command like npm run zzz where zzz refers to an entry in package.json. Later, I could put this code in the.CSPROJ file.

My question is about the paths. By having scripts in several different location, the paths inside the scripts get more complicated. Are there options like CD to specify a base path in a webpack.config file? Note that all code is in a version control archive (SVN), and might be checked out in other directories, so I cannot put absolute file paths in config files.

More fundamental is my question if I am not reinventing some wheel that others already perfectioned. So far I have only found lots of instructions on how to start a brand new react project with scripts that do everything automatic for you, without detailed considerations on how to adapt to existing project structures.

Complete help is fine, but also small bits of feedback or critique could help me find better ways.

Answer 1

1. You can put package.json in the root of your project so every sub folder can use that share package.json

2. For the path you can add into script section for specific folder like this

    "scripts": { 
      "foldera": "cd path1 && npm install",
      "folderb": "cd path2 && npm install"
    }