It's main purpose is to put your .js, .css, .html, .sass files into however many bundles you want

At a glance it just allows to:

                        
                        (function () {
                            // your code here
                        })();
                        
                    

Have some nice highlights in your IDE

It can

1. Convert
2. Preprocess
3. Bundle
4. Minify

So do all build steps

Webpack config

It works nice out of the box

with zero configuration

But it works best when configured well

Example webpack config

                    {
                        entry: './src/index.js',
                        plugins: [
                            new CleanWebpackPlugin(['dist']),
                            new HtmlWebpackPlugin({
                                title: 'YouTube client by DimaDK24',
                            })
                        ],
                        output: {
                            filename: '[name].[contenthash].js',
                            path: path.resolve(__dirname, 'dist')
                        },
                        module: {
                            rules: [
                                {
                                    test: /\.css$/,
                                    use: [
                                        'style-loader',
                                        'css-loader'
                                    ],
                                },
                                {
                                    test: /\.js$/,
                                    exclude: /node_modules/,
                                    use: 'babel-loader'
                                },
                                {
                                    test: /\.(png|jpg|gif|svg|eot|woff|woff2|ttf)$/,
                                    use: 'file-loader'
                                }
                            ]
                        }
                    }
	              

Basically it consists of

1. Loaders
2. Plugins
3. Other minor settings

Loaders

                    // loader.js

                    module.exports = function(content) {
                        return "module.exports = " + JSON.stringify(content);
                    }
                

Some awesome loaders

1. babel-loader
2. css-loader
3. style-loader
4. file-loader
5. img-loader
6. html-minify-loader
7. more...

Plugins

Some awesome plugins

1. HtmlWebpackPlugin
2. MiniCssExtractPlugin
3. SplitChunksPlugin
4. DotenvPlugin
5. more...

code splitting

Basically you can just add few entries

                    
                        entry: {
                            index: './src/index.js',
                            another: './src/another-module.js'
                        }
                    
                

But there's an issue with such configuration

Split Chunks Plugin

Dynamic imports

                    
                        import('lodash')
                            .then({ default: _ } => {
                                console.log(_.join(['Hello', 'webpack'], ' ')
                            })
                            .catch(error => {
                                console.log(`An error occurred while loading: ${error}`)
                            });
                    
                

Prefetch chunks

                    
                        import(/* webpackPrefetch: true */'lodash')
                            .then({ default: _ } => {
                                console.log(_.join(['Hello', 'webpack'], ' ')
                            })
                            .catch(error => {
                                console.log(`An error occurred while loading: ${error}`)
                            });
                    
                

The best solution for live reloading of dev website when code changes. You just install and run webpack-dev-server and it will do it.

caching

To start we can just add

                    
                        output: {
                            filename: '[name].[contenthash].js',
                        }
                    
                

But in real webpack config caching is a bit complicated

Read more:

webpack docs

nice, but a bit old article on Medium

webpack team promises more simple caching config out of the box in webpack 5

Source maps

Without source maps

                    
                        !function(t){var n={};function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};
                    
                

With source maps

To start just add this line to webpack config

                    
                        dev-tool: source-map
                    
                

For production it's better not to expose original content to end users

So we need another config for production build

Generate source maps, but do not link them with original files

                    
                        dev-tool: hidden-source-map
                    
                

You could upload them to your error reporting service