Cheat sheet for webpack's config rules
Webpack's config rules may seem complicated, but it really isn't! This is a simple "cheatsheet" that you can use for webpack's config.
Here is where you place the rules:
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "js/bundle.js",
},
mode: "development",
module: {
+ rules: [],
},
};
Your config does not have to look like the one above, I was just showing you where the rules go (in the module.rules array) and how it looks
JavaScript and JSON
Nothing is really needed for these two languages as webpack natively supports them
CSS/SCSS
You do need a few packages to import CSS and/or SCSS into webpack, but it works like a charm.
Install the packages needed with this command:
npm install postcss-loader style-loader sass-loader css-loader --save
Then, insert the following rule in webpack.config.js
under module -> rules:
{
test: /\.(scss|css)$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},
Images
Yes, you can use images in webpack. You will need to use the Assets modules rule functions.
Insert the following rule in webpack.config.js
under module -> rules:
{
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
type: 'asset/resource'
},
Fonts and SVG files
For this one, you need to use something inline assets
Insert the following rule in webpack.config.js
under module -> rules:
{
test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
type: 'asset/inline',
},
Babel
Babel is a compiler for the next generation JavaScript, today. You can basically use newer JavaScript in older browsers like Internet Explorer.
Install the packages needed with this command:
npm i @babel/core @babel/preset-env babel-loader @babel/plugin-proposal-class-properties --save
Then, insert the following rule in webpack.config.js
under module -> rules:
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
I actually made this cheat sheet for myself, but I decided to share it with everyone! Enjoy!