Webpack+react+redux+babel config in 10 minutes

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:

  1. 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:

  1. index.js
  2. index.html
  3. .gitignore(this one is not necessary but for recomendation set node modules here)
  4. webpack.config.js
  5. webpack.prod.js
  6. .babelrc
  7. 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!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.