how to use webpack on a website project and app

Question

One part of my project (call it an app) is using react which utilizes webpack. Now, I'd like to use webpack on other parts of the site which do not use react. I tried to install webpack in the root folder of the project, but get the errorno -4048, code: 'EPERM' I suspect it has something to do with the fact that webpack is already installed. So, the question is if I can use webpack that is already installed to manage other parts of the site? If yes, I assume that I have to add some key-value pair such as "buildSite": "webpack src/js/site.js dist/bundle.js" Is this the way to go?

Answer 1

Sure you can. running webpack command from npm scripts will search webpack in node_modules.

Assuming you are referring to a Monorepository with server and app project you can have a webpack.config.js for each one of your projects. They can even share common configuration.

Given this folder structure:

root_folder:
-node_modules
-package.json
-src
--server_project
---server.index.js
---webpack.config.js
--app_project
---app.index.js
---webpack.config.js

You can define the correlating npm scripts in package.json:

"scripts": {
   "build_server": "webpack ./src/server_project/webpack.config.js",
   "build_app": "webpack ./src/app_project/webpack.config.js",
   "build": "npm run build_server && npm run build_app"
}

And run:

npm run build