DEV Community

loading...

Cheat sheet for webpack's config rules

aboutdavid profile image David Originally published at notebook.aboutdavid.me on ・2 min read

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: [],
  },
};
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Then, insert the following rule in webpack.config.js under module -> rules:

{
    test: /\.(scss|css)$/,
    use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},
Enter fullscreen mode Exit fullscreen mode

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'
},
Enter fullscreen mode Exit fullscreen mode

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',
},
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Then, insert the following rule in webpack.config.js under module -> rules:

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: ['babel-loader'],
},
Enter fullscreen mode Exit fullscreen mode

I actually made this cheat sheet for myself, but I decided to share it with everyone! Enjoy!

Discussion (0)

pic
Editor guide