This content originally appeared on DEV Community and was authored by CodeOzz
From the last post, we learn how and why using loader !
In this post we will learn a new ressource coming from webpack, named ... Plugin !
What is this ?
Definition from webpack :
They also serve the purpose of doing anything else that a loader cannot do
In general we use plugin to transform or modifying things in your project, you will understand below ?
Extract CSS from JS
In prod mode we need to break CSS from JS file, if you need an explication on why, check this link -> https://stackoverflow.com/questions/43417739/why-extract-css
So to add this behavior in our project, we can use plugin like mini-css-extract-plugin. And as we need to use this plugin only in prod mode, we need to use env variable in our config !
Thanks to cross-env package we can pass env variable in command line, so we can modify the build command like this
"scripts": {
"build": "cross-env --env.NODE_ENV=prod webpack --config webpack.config.js"
},
We can get the NODE_ENV value in our config file.
After this we need to make two thing:
Add the plugin in the config
plugins: [
new MiniCssExtractPlugin({
// Name output by extract
filename: "style.css",
}),
],
And after we need to use the plugin in the loader chaining for css file, depending on the current env variable !
const cssLoaders = env === "prod" ?
[
MiniCssExtractPlugin.loader,
'css-loader'
] : [
'style-loader',
'css-loader'
]
? Note: We remove style-loader when prod mode since we don't need to implement our style in the dom since we are putting the css file output directly in <style> balise in our HTML afterward
So from now if we build file for prod, we will have two files in our dir output, js and css.
Don't forget to add style in your html file !
<head>
<link rel="stylesheet" href="dist/styles.css">
</head>
Another plugin
Another good plugin is clean-webpack-plugin, its purpose is to clean all old/useless output file in /dist folder ?.
Add in plugins list ?
new CleanWebpackPlugin()
From now each time you build new changes, this plugin will remove old/useless file !
Conclusion
So now you now what is plugin in webpack ! You have a lot of plugin to discover !
Code here -> https://github.com/Code-Oz/webpack-academy/tree/d51480ddbf63cf1c0066311d27f1777a5683a823
I hope you want to learn more about webpack in my academy !
If you want to have nice article to read about web dev, you can subscribe to my FREE newsletter at this url -> https://codeoz.substack.com/welcome
And you can follow me on :
Twitter : https://twitter.com/code__oz
Github: https://github.com/Code-Oz
And if you want to buy me a coffee :D -> https://www.buymeacoffee.com/CodeoZ
This content originally appeared on DEV Community and was authored by CodeOzz
CodeOzz | Sciencx (2021-08-11T17:52:18+00:00) Webpack Academy #2: Plugins. Retrieved from https://www.scien.cx/2021/08/11/webpack-academy-2-plugins/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.