Step 1
- Create folderwebpack-2-demo
and initialize npm:Step 2
- Install webpackStep 3
- Write webpack configwebpack.config.js
in root of our directory and let's write some configuration.package.json
by.src/app.js
Step 4
- Run the webpackdevelopment mode
.production mode
.p
is for production which uglifies and minifies files.Step 5
- Setup webpack development serverwebpack.config.js
by adding the following.bundle.js
in src/index.html
.Step 6
- Run development serverSASS, IMAGES, ES6
loaders ? How to setup that ? Lets see.ES6 + Babel
using a webpack loader.Step 1
- Install babel loader,core & ES6 preset.webpack.config.js
file.Step 2
- ES6 Loaderapp.js
to ES6 syntax.Step 3
- SASS & CSS Loaderloaders
, final steps are setting up sourcemaps and env for webpack.Step 7
- Setup Dev & Prod Environmentpackage.json
file, lets add scripts to run our dev server and build with env.NODE_ENV=production
is environment set for build. Using process.env.NODE_ENV
, we can check the env in webpack.Step 8
- Sourcemap for Dev & ProdFinal