Basics of Webpack

Webpack can be complicated, but it doesn't have to be. Learn some of the basics of webpack, and how you can get started with it while actually understanding it. In this video we start our journey to working with react and django, but first we need to build our javascript and that is where webpack comes in.
Download HD Version next video: Configure Babel with Webpack

commands

npm init
npm i --save-dev webpack
npm run build

package.json

{
  "name": "reactdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "./node_modules/.bin/webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.13.2"
  }
}

webpack.config.js

const path = require('path');

const common = {
  entry: {
    path: path.join(__dirname, 'js')
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'index.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [],
        include: path.join(__dirname, 'js')
      }
    ]
  }

};

module.exports = common;
comments powered by Disqus