Learning Lab
Published in

Learning Lab

How I learnt webpack 3 and created a Jekyll and Webpack boilerplate

#5 — Fifth month of my challenge: 12 topics to learn in 12 months

It’s webpack not Jetpack … but the idea is the same, to give boost!

Preparation

Learning without mentor is indeed less fun!

The documentation

What is webpack?

Résultat de recherche d'images pour "webpack3"

How did I practice?

Webpack concept

const config = {
entry: './path/to/my/entry/file.js',
output: {
// ...
},
module: {
rules: [
// ...
]
},
plugins: [
// ...
]
};

module.exports = config;
import defaultMember from "module-name";
import { member } from "module-name";
import "module-name";
import "style.css";
import myLogo from 'images/logo.png';
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
]
}
};

What else did I learn?

The creation of the Jekyll wepack boilerplate

What is Jekyll

The requirements of the boilerplate

The implementation

Writing documentation

Creating a logo

Here is the beautiful and simple logo!

The final performance test

SConférenciers made with Jekyll
SConférenciers made with Jekyll webpack boilerplate (with PWA generated)

The final result

Feedback from this learning month

What went well

What to improve

If you liked this post, please click the clap 👏button below a few times to show your support! Also, feel free to comment and give any kind of feedback. Don’t forget to follow me!

--

--

How to learn one topic every month

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sandoche ADITTANE

Hello, I’m Sandoche Adittane. I learn about one topic every month and write a post about it!