Dorokhov.codes

04. Webpack

Home page: https://webpack.js.org.

Installation

docker container run --rm \
--interactive \
--tty \
--volume "$PWD:/usr/src/app" \
--workdir /usr/src/app \
--user $(id -u):$(id -g) \
node:21 npm install webpack webpack-cli --save-dev

Run

docker container run --rm \
--interactive \
--tty \
--volume "$PWD:/usr/src/app" \
--workdir /usr/src/app \
--user $(id -u):$(id -g) \
node:21 npx webpack

Configuration

You can use webpack without a config file, but then you need to follow standard file structure of a project.

webpack.config.js:

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    watch: true,
    devtool: "source-map"
};

Polyfills

Adding Babel to Webpack

npm install --save-dev @babel/core @babel/cli @babel/preset-env

npm install --save @babel/polyfill

For Webpack:

npm install --save-dev babel-loader

Additional library for polyfills (used by Babel):

npm install --save-dev core-js

webpack.config.js:

module.exports = {
    
    // ...

    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [['@babel/preset-env', {
                            debug: true,
                            corejs: 3,
                            useBuiltIns: "usage"
                        }]]
                    }
                }
            }
        ]
    }
};

Browserslist

The config to share target browsers and Node.js versions between different front-end tools.

GitHub: https://github.com/browserslist/browserslist

Page: https://browsersl.ist, https://browserslist.dev

Examples:

  • > 5% all versions with > 5% of the audience worldwide.

All tools will find target browsers automatically, when you add the following to package.json:

"browserslist": [
    "> 2%"
]