I am new in Webpack
and my doubt is that when I install the DevDependencies
such as the webpack itself generates the folder Node_Modules in this folder there are more development dependencies, so I want to use React
and I already have it installed but I see that you need a loader like Babel, what happens is that in the folder Node_Modules I realized that there are several folders of babel. What I want to get to is the following.
My "package.json" file is this
{
"name": "ProyectoFinal",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode=development",
"build": "webpack --mode=production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.2.0",
"webpack-cli": "^2.0.13"
},
"dependencies": {
"bootstrap": "^4.0.0",
"jquery": "^3.3.1",
"jquery-validation": "^1.17.0",
"jquery-validation-unobtrusive": "^3.2.8",
"react": "^16.2.0",
"react-dom": "^16.2.0"
}
}
But I have seen on a page that has it in the following way
{
"name": "webpack-for-react",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-prop-types": "^0.4.0",
"react-router-dom": "^4.2.2",
"semantic-ui-react": "^0.77.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.3",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"css-loader": "^0.28.10",
"html-webpack-plugin": "^3.0.4",
"style-loader": "^0.19.1",
"webpack": "^4.0.0",
"webpack-dev-server": "^3.0.0"
}
}
For example in the development dependencies (devDependencies) are babel-core, babel-loader, among others and I just install webpack without more, that is npm i --save-dev webpack
, I get that in the folder NODE_MODULES, then there my doubt. It is assumed that it is already installed, right? or am I wrong. If someone could clarify this confusion I would appreciate it.