Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3
Last active January 24, 2023 07:18
Show Gist options
  • Star 15 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save prof3ssorSt3v3/3e5fcbfae9ba28b5816fd93a074e65bd to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/3e5fcbfae9ba28b5816fd93a074e65bd to your computer and use it in GitHub Desktop.
Code from Getting Started with WebPack 5 (2021) video

File Details

  • webpack.config.js goes in the root folder of your project
  • package.json goes in the root folder of your project

Run this command to install all the dependecies from the package.json file

npm install

All the other files in this Gist go inside the src folder.

The dist folder remains empty. Its files will be generated when you run the build command.

import style from './main.css';
import component from './component.js';
console.log('¡Hola!');
console.log('adios');
document.body.append(component());
import logo from './logo.svg';
function component() {
let m = document.createElement('main');
let p = document.createElement('p');
let img = document.createElement('img');
m.append(p);
p.append(img);
img.src = logo;
img.alt = 'sample logo';
return m;
}
export default component;
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 20px;
font-weight: 300;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 1.5;
}
body {
min-height: 100vh;
background-color: #333;
color: #eee;
}
header,
main,
footer {
width: 80vw;
padding: 1rem 2rem;
margin: 0 auto;
}
header h1 {
color: orange;
}
header h2 {
color: orangered;
}
p {
line-height: 1.7;
margin: 1.5rem 0;
}
img {
max-width: 50vw;
}
{
"name": "webpack-intro",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack serve"
},
"keywords": [],
"author": "Steve <steve@home.org>",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.14.8",
"@babel/preset-env": "^7.14.8",
"babel-loader": "^8.2.2",
"css-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"style-loader": "^3.2.1",
"webpack": "^5.45.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<header>
<h1><%= htmlWebpackPlugin.options.title %></h1>
</header>
</body>
</html>
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development', //production
entry: {
main: path.resolve(__dirname, 'src/app.js'),
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js',
assetModuleFilename: '[name][ext]',
clean: true,
},
devtool: 'inline-source-map',
devServer: {
static: path.resolve(__dirname, 'dist'),
port: 5001, //default 8080
open: true,
hot: true,
},
//loaders
module: {
rules: [
//css
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
//images
{ test: /\.(svg|ico|png|webp|jpg|gif|jpeg)$/, type: 'asset/resource' },
//js for babel
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
//plugins
plugins: [
new HtmlWebpackPlugin({
title: 'Just a Demo',
filename: 'index.html',
template: path.resolve(__dirname, 'src/temp.html'),
}),
],
};
@max6478
Copy link

max6478 commented Oct 4, 2021

remi-1-of-1-7

@bitsnaps
Copy link

bitsnaps commented Oct 15, 2021

There are some breaking changes in the new version of WebPack, I had to do the following:

  • contentBase replaced by static (you did it here in this gist).
  • use watchFiles instead of watchContentBase like so:
devServer: {
...
watchFiles: [path.resolve(__dirname, 'src')]
}

Thank you Steve!

@koraytugay
Copy link

In my case I need to remove the following line:

static: path.resolve(__dirname, 'dist'),

otherwise I am getting the error:

[webpack-cli] webpack Dev Server Invalid Options

options should NOT have additional properties

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack-intro@1.0.0 dev: `webpack serve`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the webpack-intro@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

When I remove that line, npm run dev starts working - but hot reload is not working..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment