DEV Community

Cover image for brain dump - Webpack Revision
Ali Al Khawaja
Ali Al Khawaja

Posted on • Edited on

brain dump - Webpack Revision

#webpack #webdev #frontend

“⚠️ This is a personal reference post — not a full guide.”
Hi reader .

Lesson overview

  • Why do we need webpack for our project ?
  • How to start web-packing ?
  • Reading WebPack guide online .

Why do we need webpack for our project ?

You can ask Chatgpt for the answer or just visit the introduction page.
I don't want to add it here because this is a revision, I would however say that we use Webpack for :

  1. It's Module Bundling
  2. It's Code Splitting
  3. It's Asset Management
  4. It's Transpilation
  5. It's Hot Module Replacement
  6. It's Plugins
  7. It's Development and Production Modes
  8. It's Configuration Flexibility
  9. It's Community and Ecosystem

How to start web-packing ?

Step 1: you need a package.json file, so, you should make one by

npm init - y
Enter fullscreen mode Exit fullscreen mode

if you see a type tag in the package.json like "type": "commonjs" , remove it .

Step 2: You install webpack

npm install --save-dev webpack webpack-cli
Enter fullscreen mode Exit fullscreen mode

We included the --save-dev flag (you can also use -D as a shortcut), which tells npm to record our two packages as development dependencies.

Step 3 : Create a configuration file, you can name it webpack.config.js

Step 4 : make a configuration !

// webpack.config.js
const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
};
Enter fullscreen mode Exit fullscreen mode

You don't know how to make a configuration file? read this

Dealing with HTML files ?

we use HtmlWebpackPlugin
Install it npm install --save-dev html-webpack-plugin then add this block :

  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/template.html",
    }),
  ],
Enter fullscreen mode Exit fullscreen mode

read about it here
then npx webpack , this command runs webpack

Dealing with CSS ?

Install a plugin

npm install --save-dev style-loader css-loader
Enter fullscreen mode Exit fullscreen mode

Dealing with images ?

Install a plugin

npm install --save-dev html-loader
Enter fullscreen mode Exit fullscreen mode

You get the idea now do you ? it is all in the docs

Anyways lets talk about webpack dev server
Install it

npm install --save-dev webpack-dev-server
Enter fullscreen mode Exit fullscreen mode

then

npx webpack serve
Enter fullscreen mode Exit fullscreen mode

Read about it here

where to find guides ?

Here

If you think this post is pointless then you would be right, honestly I write just to make stuff stick in my head , I know that nobody is gonna read this anyways.

It's just a tool 🤷‍♂️
I will try to pick an interesting subject next time😔.
Bye

Top comments (0)