Webpack Academy #7: More options on config file

We almost do it !

This is the last webpack academy!

I hope you like and learn it!

Today will be easier than the last.

I will show you some other interesting things to do in the config file.

Name options

When we use hash to name our bundle, we made something like 👇

filename: "[contenthash:8].js"

But you can use another thing to properly name your bundle !

Use the name option!

So you can use this 👇

filename: "[name].[contenthash:8].js"

And we get something like

myApp.ce59c821.js

Why do we get this name?

To understand this, we should go back into the entry property in our config file.

    entry: {
        myApp: [
            "./src/style.css",
            "./src/main.js",
        ],
    },

Yes, webpack will use the name given by your entry point (here myApp) and put it into [name] property!

It works for css bundle also!

But what happens with chunk file, since there are not defined in our config file?

Do you understand that you can give a name to your chunk?

const jsonObjectImport = async () => import(/* webpackChunkName: "myChunkName" */ "./big-object.json")

Webpack will replace [name] by the chunk name! (here myChunkName)

It's an important property to me since we can see the name of our bundle in our dist folder!

Create alias

In order to avoid something like this import toto from ../../../toto/toto, we can use alias to make something more readable like import toto from @/toto/toto

To achieve this, we need to use resolve.alias in our config file !

    resolve: {
        alias: {
            '@': path.resolve(__dirname, "./src/"),
        }
    },

So if we need to import a file from src/ we can make this

import { first } from '@/first'

For more information about this https://webpack.js.org/configuration/resolve/#resolvealias

Copy webpack plugin

If you have any static files, you will see that theses static files will be not added into your dist/ folder!

Since it will not be compiled by Webpack.

If you need to add some static files into our dist/ folder like images or others things, you will need to use Copy Webpack plugin.

new CopyPlugin({
   patterns: [{
      from: path.resolve(__dirname, "src/static"),
      to: "static"
   }],
}),

You put the source path of your statics files, and the name of the folder that will contain these files in our dist/ folder!

Environment files

If you need to inject an environment file into your project, you will need to use this plugin DotenvPlugin!

Create an .env with your value. (Here I push the env file for the example, but you should not push env file in your git project !)

new DotenvPlugin({
   sample: './.env',
   path: './.env'
})

You can use sample with default env value also!

For more information: https://github.com/nwinch/webpack-dotenv-plugin

It's finished! I hope you like this series about Webpack!

I like to write this, and I hope you learn a few things!

You can check the source code at this commit

I hope you like this reading!

🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and MP me 😁

Or get it HERE

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!