Webpack Academy #7: More options on config file
Tags: webpack, webdev, javascript, programming
Published: 2021-09-12 11:41:12

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 👇

```javascript
filename: "[contenthash:8].js"
```

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

Use the `name` option!

So you can use this 👇

```javascript
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.

```javascript
    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?

```javascript
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 !

```javascript
    resolve: {
        alias: {
            '@': path.resolve(__dirname, "./src/"),
        }
    },
```
So if we need to import a file from `src/` we can make this

```javascript
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**.

```javascript
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 !)

```javascript
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](https://github.com/Code-Oz/webpack-academy/tree/6d960e309b390f07205f8d500e6a2163348b304d)

---

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](https://twitter.com/code__oz) and MP me 😁

Or get it [HERE](https://codeoz.gumroad.com/l/RXLYp)

🎁 [MY NEWSLETTER](https://www.getrevue.co/profile/code__oz)

☕️ You can [SUPPORT MY WORKS](https://www.buymeacoffee.com/CodeoZ) 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : [https://twitter.com/code__oz](https://twitter.com/code__oz)

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

And you can mark 🔖 this article!