Basic Webpack 5 Setup

Webpack takes all the different pieces of your project (js pages, css, html, fonts, images etc…) creates a dependency tree for it, and bundles it together. Including the babel transpiler will give your project cross browser support with all the css tedium.

npm init -y 

y is optional and will auto accept all the defaults.

npm install webpack —save-dev || npm install webpack -D
npm i webpack-dev-server --save-dev

Webpack is the bundler
Webpack-dev-server bundles the files for development, but it stores them in the computers memory instead of outputting them to the dist/ folder.

Get Desiree Joy Bradish’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Create a webpack.config.js file

const path = require('path')
module.exports = {     
 entry: {         
        main: path.resolve(__dirname, './src/app.js')     
        },     
 output: {         
        filename: '[name].bundle.js',         
        path: path.resolve(__dirname, 'dist')     
        },     
 devServer: {         
       static: './dist',         
       open: true     
       },     
}

Install BabelJS Compiler for cross browser support, meaning you don’t have to type up those workarounds…

display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

Run the NPM install command

npm i babel-loader @babel/core @babel/preset-env --save-dev

Create a new module for rules in webpack.config, and add babel for anything that ends in .js Notice the test, that’s our regex for JS files.

module: {         
 rules: [         
  {             
   test: /\.js$/,
   exclude: /node_modules/,             
   use: {                 
    loader: 'babel-loader',                 
    options: {                     
     presets: ['@babel/preset-env']                 
     }             
   }         
 }         
]
}

Now we need to load css styles.

npm i css-loader style-loader --save-dev

Then add this into the rules array we just created.

module: {         
 rules: [         
  {             
   test: /\.js$/,
   exclude: /node_modules/,             
   use: {                 
    loader: 'babel-loader',                 
    options: {                     
     presets: ['@babel/preset-env']                 
     }             
   }         
 },
{ 
test: /\.css$/,
 use: ['style-loader', 'css-loader']
 }     
]
}

Now we need to add the image handling rule, we will also use this for font files. For this we will install url-loader

npm i url-loader --save-dev

And again, add it into the rules, this time for all the image and font types we intend to use.

module: {         
 rules: [         
  {             
   test: /\.js$/,
   exclude: /node_modules/,             
   use: {                 
    loader: 'babel-loader',                 
    options: {                     
     presets: ['@babel/preset-env']                 
     }             
   }         
 },
{ 
test: /\.css$/,
 use: ['style-loader', 'css-loader']
 },
{     
test: /\.(gif|png|jpe?g|svg|woff|woff2)$/i,     
use: {          
 loader: 'url-loader',         
 }
}
]
}

That’s it. You should have a complete webpack config file that looks something like…

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
    entry: {
        main: path.resolve(__dirname, './src/app.js')
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        static: './dist',
        open: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "Half Moose Lodge and Campground"
        })
    ],
    module: {
        rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.(gif|png|jpe?g|svg)$/i,
        use: {
          loader: 'url-loader',
        },
      },
      {
        test: /\.(woff|woff2)$/,
        use: {
          loader: 'url-loader',
        },
      },
        
        ]
    }
}