First thing, let me say this post won’t teach you webpack. If you don’t know how to config webpack please read the docs or other articles. Here i’ll put a quick copy-paste guide to create a new project using webpack. If you already understand webpack but loose a lot of time in configuration this is for you.

Pre-requisites:

Node

NPM WEBPACK-REACT-REDUX-BABEL STARTER PACK

Installations:

node modules

npm init -y webpack

npm install --save-dev webpack

npm install --save lodash webpack devserver

npm install webpack-dev-server --save-dev react

npm install --save react react-dom react router

npm install --save react-router react router dom

npm install react-router-dom babel

npm install --save-dev babel-preset-env babel for ES2015

npm install --save-dev babel-preset-es2015 babel for jsx

npm install --save-dev babel-preset-react redux

npm install --save redux

npm install --save react-redux

npm install --save-dev redux-devtools Loaders for webpack Babel loader

npm install --save-dev babel-loader babel-core babel-preset-env webpack For css

npm install style-loader --save-dev Flexbox-grid react

npm install --save react-flexbox-grid styled components

npm install --save styled-components For files

npm install --save-dev file-loader HotModule replacement with css

npm install --save-dev style-loader css-loader Plugins

npm install html-webpack-plugin --save-dev

npm install --save react-hot-loader@next

Then create some folders:

-src

--components

--assets

-dist

--build

Now create some files to configuration:

index.js index.html .gitignore(this one is not necessary but for recomendation set node modules here) webpack.config.js webpack.prod.js .babelrc container.js at src/components

PS: Outside those folders. At the project root.

Here the files of configuration:

Finally to create the build run this:

For dev build:

npm run build:dev

And for prod mode:

npm run build:dist

Last Thing

Add this at the body in index.html inside dist/build:

<div id="root"></div>

and now start the project:

npm start

Done!

Did you find something wrong? please comment what and where.

keep coding!