An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
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!
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!
Original Link: https://dev.to/codeoz/webpack-academy-7-more-options-on-config-file-405b
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To