前提条件

npm や yarn のコマンドが使える必要があります
ターミナルの操作が行える必要があります
HTML や JavaScript の基礎を知っている必要があります

結論

以下のようにしましょう。

1. webpack と webpack-cli をインストールする

webpack と webpack-cli をインストールします*1。

$ npm install webpack webpack-cli

2. 例として、jQuery を npm でインストールする

webpack を用いてバンドルするパッケージの例として、jQuery をインストールします。

$ npm install jquery

3. jQuery のコードを src/index.js に書く

まっさらな webpack*2 が見に行くエントリーポイントは src/index.js になります。なのでこのファイルを作ってあげます。

src/index.js には次の内容を書きましょう。

const $ = require('jquery');

$(function() {
  $('#my-button').on('click', function () {
    alert('Hello, webpack World!');
  });
});

4. HTML ファイルを書く

以下のような HTML ファイルを書きます。ファイル名は index.html とします。置き場所はプロジェクトの直下です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>
    Hello, webpack World!
  </title>
</head>

<body>
  <button id="my-button">押して下さい！</button>
  <script src="./dist/main.js"></script>
</body>
</html>

<script> タグで読み込んでいる場所に注目してください。dist/main.js となっています。これは、まっさらな webpack*3 がバンドルしたファイルを書き出す場所になります。

5. webpack を実行する

ここまでできたら webpack を実行しましょう。実行後は dist/main.js が生成されています。

$ npx webpack
Hash: 337aef3342c03cd4003b
Version: webpack 4.41.5
Time: 2240ms
Built at: 2020/01/05 23:28:13
  Asset      Size  Chunks             Chunk Names
main.js  87.6 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js 136 bytes {0} [built]
    + 1 hidden module

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

WARNING in configuration が出ていますが、こちらの意味や解決方法は調べてみて下さい*4。