Discovering the structure of a Webpack config file

If we want to use Webpack correctly, we need to understand the structure of the webpack.config.js file, which will set the behavior of Webpack executions.

Let’s open the _dev/webpack.config.js file and see how it works. By going through it line by line, we will first find the required JavaScript libraries block calls. We can find the following requirements:

• Path: provides a way of working with directories and file paths
• MiniCssExtractPlugin: enables creating a separate CSS file if an SCSS or a CSS is in the entry list or in a file
• Terser: enables minifying/minimizing the JavaScript scripts
• CSSO: enables cleaning and minifying CSS code
• LicensePlugin: cleans the license code from plugins and stores it in the same file instead

Then, let’s see how the entry field is defined and what it stands for:

entry: {
     theme: ['./js/theme.js', './css/theme...