React - webpack

Webpack is a module bundler for modern Java script applications. It takes modules with dependencies and generates static assets representing those modules.
When webpack processes the application it recursively builds a dependency graph which includes every module that application needs and then converts all those modules into a small number of bundles — generally only one of those bundles to be loaded in browser.
It is highly configurable. Below are a few of th major core concepts of webpack we cover.
  • Entry
  • Output
  • Loaders
  • Dev Server (webpack-dev-server)
  • Plugins
Entry
Example
  1. module.exports =
  2. {
  3. entry: "./src/index.js"
  4. }
Output
Example in webpack.config.js
  1. module.exports = {
  2. entry: "./src/index.js"
  3. output: {
  4. path: "Idist/assets",
  5. filename: "bundle.js",
  6. publicPath: "assets"
  7. }
  8. }
Loaders
Example
  1. module.exports = {
  2. module: {
  3. loaders: [{
  4. test: /\.(js|jsx)$/,
  5. exclude: /(node_modules)/,
  6. loader: 'babel-loader',
  7. query: {
  8. presets: ('es2015', •react, 'stage-Ol']
  9. }
  10. }, ]
  11. }
  12. }
Dev server – webpack-dev-server
Example
  1. module.exports = {
  2. devServer: {
  3. inline: true,
  4. contentBase: './dist',
  5. port: 8080
  6. },
  7. };
Plugins
Example
  1. query: {
  2. presets: Ces2015 ', '
  3. react ', •stage-m,
  4. plugins: ['react-html-attrs'],
  5. }