モジュールバンドラ／webpackを学ぶための学習環境作り
オンライン学習プラットフォーム「Udemy」に、超絶わかりやすいwebpack学習講座が無料で公開されていた。
webpackを学習するための環境作りについて
テキストでまとめる。
→講座は以下。
→webpackの公式サイト
▶︎必要なもの
最低限必要なのは、以下の３点。
1. Node.js
2. webpack
3. webpack-cli
ただし、webpackとwebpack-cliはバージョンにより挙動が異なる部分があるため注意が必要。
講座のとおりに進めたい場合は、
以下にバージョンを合わせる必要がある。
webpack: 4.41.2
webpack-cli: 3.3.9
バージョン指定をしなければ、
2021/8/6時点で、以下がインストールされる。
webpack: 5.49.0
webpack-cli: 4.7.2
▶︎package.json作成
プロジェクトディレクトリへ移動し、
以下のコマンドでpackage.jsonを作成しておく。
yarn init -y▶︎バンドル対象ファイル作成
バンドル対象のファイル(index.js)、
およびhtmlファイル(index.html)をsrcディレクトリ配下に作成
// index.js
console.log("Let's learn webpack.");<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning for webpack</title>
</head>
<body>
<script src="./index.js"></script>
</body>
</html>▶︎現時点のプロジェクトディレクトリ
▶︎バンドルファイル作成実行(webpack.config.jsなし)
オプションを指定して、バンドルする。
yarn run webpack --mode development --devtool nonewebpack5では、devtoolの指定の仕方が変わったため上記コマンドを実行するとエラーが出力される。
→参考記事 1
→参考記事 2
▶︎バンドルファイル作成実行(webpack.config.jsあり)
以下のようなwebpack.config.jsを作成。(CommonJSの書式に従う)
module.exports = {
mode: "development",
devtool: "none"
}オプション指定なしで、バンドルする。
yarn run webpack通常は、webpack.config.jsを定義して、
バンドルする。
以上。
この記事が気に入ったらサポートをしてみませんか？