Getting Started

Basic zero-conf Webpack 4

Create your project directory and cd into it. mkdir webpack-express-demo && cd webpack-express-demo

  1. Initialize the folder
    • yarn init
  2. Then get webpack and webpack-cli
    • yarn add webpack && yarn add webpack-cli -D
  3. Create a dist directory and add index.html file to it
    • mkdir dist && touch dist/index.html

dist/index.html

<!DOCTYPE html>
<html>
 <head>
   <title>Webpack Express Demo</title>
 </head>
 <body>
   <script src="main.js"></script>
 </body>
</html>

  1. Create src directory and add index.js inside

    • mkdir src && touch src/index.js

    src/index.js

    var title = document.createElement('div')
title.innerText = "Hello Webpack!"

document.body.appendChild(title)

  2. Now edit your package.json file, adding build script

package.json

  {
    "name": "webpack-express-demo",
    "version": "1.0.0",
    "main": "index.js",
    "author": "Unicorn Kitty",
    "license": "MIT",
    "scripts": {
      "build": "webpack"
    },
    "dependencies": {
      "webpack": "^4.1.1"
    },
    "devDependencies": {
      "webpack-cli": "^2.0.12"
    }
  }

  1. Last run npm run build. You will get a warning about modes but we will fix this later.

    • npm run build Then open your index.html file in your browser and you will see Hello Webpack!

results matching ""

    No results matching ""