suwigyarathore / webpack-production

This repo contains how to use webpack to make production ready build

#webpack-tutorial

This repo contains how to use webpack to make production ready build

Topics Covered:

• What is Webpack
• How to create a production ready bundle
• How to do code splitting
• How to do dead code elimination
• How to do tree shaking to remove dead code
• How to do hot module replacement (HMR)
• How to do hot/live reload
• How to use ES6/ES.next/ES2015 code in production with Babel
• How to load images
• How to load style (css)
• ...and more

Installation

1. Install

# Clone this repo
git clone https://github.com/suwigyarathore/webpack-production.git

# Install dependencies
npm install

# Run for development
npm run dev
# go to http://localhost:8080

# Run for production
npm run build

Links

State of Javascript

• http://stateofjs.com


Webpack

• http://webpack.github.io
• http://webpack.github.io/docs/list-of-plugins.html
• http://webpack.github.io/docs/list-of-loaders.html

Webpack Dev Server

• https://webpack.github.io/docs/webpack-dev-server.html

Plugins

• Extract Text
  • https://github.com/webpack/extract-text-webpack-plugin
• HTML Webpack
  • https://github.com/ampedandwired/html-webpack-plugin
• UglifyJS
  • https://webpack.github.io/docs/list-of-plugins.html
  • https://github.com/mishoo/UglifyJS
• Define
  • https://webpack.github.io/docs/list-of-plugins.html

Loaders

• babel-loader
  • https://github.com/babel/babel-loader
• url-loader
  • https://github.com/webpack/url-loader
• file-loader
  • https://github.com/webpack/file-loader
• style-loader
  • https://github.com/webpack/style-loader
• css-loader
  • https://github.com/webpack/css-loader