This content originally appeared on DEV Community and was authored by CodeOz
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!
If you want to have a nice article to read about web dev, you can subscribe to my FREE newsletter & get a cheatlist about Javascript at this URL ?
☕️ 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!
This content originally appeared on DEV Community and was authored by CodeOz
CodeOz | Sciencx (2021-09-12T11:41:12+00:00) Webpack Academy #7: More options on config file. Retrieved from https://www.scien.cx/2021/09/12/webpack-academy-7-more-options-on-config-file/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.