Webpack setup: One JS output

Learn by example how to setup a webpack web project
🖊️ Read the article 🐞 Report a Bug 🙋‍♂️ Request Feature

The Project

Repository with example configuration in diferent use cases

Features

Basic VanillaJS app with a single script or few commands
npm and node for javascript code
webpack for bundling

Prerequisites

npm 6.14 +
node 12.16 +
A Text Editor like VSCode

Getting Started

First step is to create a folder, then inside we initialize npm:

npm init -y

npm i -D webpack webpack-cli

If you will only need one output JS file the only remaining thing to make is a folder called src/ and inside a file called index.js. Inside of this file you can put you code, call other files and import CSS. Now please open your file called package.json and in the section called "scripts" like this:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"
  },

All that code will be output into a new file inside dist/ folder just using this command npm start. You'll notice the new folder and a file called main.js will be produced.