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 -ywebpack
npm install --save-dev webpack
npm install --save lodashwebpack devserver
npm install webpack-dev-server --save-devreact
npm install --save react react-domreact router
npm install --save react-routerreact router dom
npm install react-router-dombabel
npm install --save-dev babel-preset-envbabel for ES2015
npm install --save-dev babel-preset-es2015babel for jsx
npm install --save-dev babel-preset-reactredux
npm install --save redux
npm install --save react-redux
npm install --save-dev redux-devtoolsLoaders for webpackBabel loader
npm install --save-dev babel-loader babel-core babel-preset-env webpackFor css
npm install style-loader --save-devFlexbox-grid react
npm install --save react-flexbox-gridstyled components
npm install --save styled-componentsFor files
npm install --save-dev file-loaderHotModule replacement with css
npm install --save-dev style-loader css-loaderPlugins
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:distLast 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!
