webpackの環境構築をよくやるので、共有と備忘録を兼ねて、初心者の方向けにwebpackの導入を書いてみました。(私も初心者ですが、、)
単にwebpackをインストールするだけでなく、基本的な設定やwebpack-dev-server(定番の開発用サーバー)の導入も合わせてやっていきます。
▼前提条件
PCにnode.jsがインストールされていること（重要）
cdコマンドなど、基本的なターミナル操作ができること（重要）
webpackがどんなものかはなんとなく知っている
webpackがまったく分からんという人は、このあたりを読んでみるのいいかも。
▼私の環境
OS : Win10 home
Editor : VScode
Terminal : bash
Node.js version : v14.16.1
macOSの人でも手順自体は一緒だと思います（エアプ）あと、npm使ってます。
▼本編
やること：webpackの初期導入。ビルド確認と、開発用サーバーの立ち上げ。
▽1.作業用ディレクトリを作成
作成するプロジェクト用に、空のディレクトリを作りましょう。
僕は今回、「webpack-test」という名前の空ディレクトリを作成することにします。
▼ディレクトリを作ったらターミナルを開いて
terminal(bash)
//作成したディレクトリの中に移動。
$ cd さっき作ったディレクトリの名前
//package.jsonを作成
$ npm init -y
ディレクトリ内に"package.json"が生成されたら成功！
▽2.webpackをインストール
▼webpack本体とCLIだけでもいいのですが、
今回はwebpack用の便利なローカルサーバー、"webpack-dev-server"もインストールします。後で使い方も解説します。
terminal(bash)
npm i -D webpack webpack-cli webpack-dev-server
少し時間がかかるので、しばし待ちましょう。
▽3.記述をまとめるディレクトリを作成
▼続いて、記述するファイルをまとめておく為のディレクトリを作成します。一般的に"src"とされることが多い為、ここでもそのようにします。
srcの中に、テスト用のJSファイルを追加しておきましょう。
ここまでのディレクトリ構成
root(私の場合はwebpack-test)
├── node_modules
+├── src
+│ ├──index.js //バンドル用
+│ └──app.js
├──package-lock.json
└──package.json
▼app.jsには簡単なサンプルコードを記述しています。console.log("hello world")とかでもいいのですが、今回はHTMLファイルに文字を出力したかったので以下のようにしました。目的はあくまで動作確認なので、自分が分かれば何でもいいです。
app.js
export function fn() {
//htmlファイルは後から作るよ
const sampleText = document.querySelector("#content");
sampleText.insertAdjacentHTML('beforebegin', '<p>とんかつ食いたい</p>');
}
▼そして、app.jsでエクスポートしたfn関数を、まとめ（バンドル）役であるindex.jsへインポートし実行します。
index.js
//index.js内にapp.jsで作ったfn関数をインポート
import { fn } from "./app";
//実行
fn();
▼ここで一度、ビルドが通るかどうかテストしておきましょう。
terminal(bash)
$ npx webpack
//注意：npmではなく、npxだゾ。
"npx webpack"でビルドが走ります。"dist"というフォルダがルート直下に生成され、その中に"main.js"があればとりあえずOK。"main.js"を見てみると、先ほど記述した"src"の中身が吐き出されています。
ビルド時、ターミナルにwarningと表示されてもとりあえず無視でおｋ。^^b
▽4.HTMLを追加しとく
今回はブラウザに文字を出力してビルドがきちんと行えているか確認したいので、HTMLファイルも追加したいと思います。
今回は、さっき生成された"dist"フォルダの中にindex.htmlを追加しましょう。
▼前回のディレクトリ構成との差分はこんな感じになると思います。
distの中にindex.htmlを追加
root
+├── dist
+│ ├──index.html
+│ └──main.js
├── node_modules
├── src
│ ├──index.js
│ └──app.js
├──package-lock.json
└──package.json
▼作成したhtmlファイルの中身を記述します。VScodeのユーザーは、「shift + !」でHTMLの骨組み部分が一気に作れるので試してみてください。
それから、bodyタグの直前でmain.jsを読み込んでおくのを忘れずに。
index.html
<!DOCTYPE html>
<html lang="en">
<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>webpack test(好きなタイトルを入れる)</title>
</head>
<body>
<p>お前と一緒に</p>
<div id="content"></div> <!-- fn関数で使っているID要素 -->
<script src="main.js"></script> <!-- ←これ忘れんなよ～～～～ -->
</body>
</html>
▽5.webpack.config.jsを作成。
まだやることがあります（笑）。webpackの設定を書き込むためのファイル、webpack.config.jsを作ります
「webpack.config.js」これをルート直下に新規作成します。
▼画像参照
今回webpack.config.jsでやることは、
モード指定（開発モードor本番モード）
エントリーファイル（出力元）のファイルを指定
出力先のディレクトリを指定
出力をまとめるjsファイルを指定
webpack-dev-serverの設定を記述
上記5点を設定します。あまり話すと長くなるので、実際の記述をご覧ください。コピペしてもらって大丈夫です。
webpack.config.js
const path = require('path');
module.exports = {
//モード指定。開発モードである"development"を選択。
mode: "development",
//entry(出力元)のファイルを指定。
entry: './src/index.js',
//output(出力先)
output: {
//出力されるディレクトリのパスとディレクトリ名を指定
path: path.resolve(__dirname, 'dist'),
//生成されるJSファイル名を指定
filename: 'main.js'
},
//webpack-dev-serverのオプション
devServer: {
//サーバーで立ち上げるディレクトリを指定
static: {
directory: path.join(__dirname, 'dist'),
},
//open:trueでサーバーを起動したときに自動的にブラウザを立ち上げる
open: true
}
};
こんな風に書きます。ちなみにwebpack-dev-serverのオプションであるdevServerの項目ですが、バージョンによって書き方が異なるので注意してください。(2021/09/05)
webpackのプラグインは、アップデートで記述方法が変わってしまうことが良くあるので、公式ドキュメントを参照しながら作業することをお勧めします。
▽6.コマンドをカスタマイズ
ビルドとwebpack-dev-serverの立ち上げをひとつのコマンドで実行出来たら便利！ということで、package.jsonを少し変更します。注目して頂きたいのは"scripts"の中身です。既存の記述を消して、以下のように書き直してみてください。
package.json
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "npx webpack && webpack-dev-server",
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.51.2",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.1.0"
}
}
npm run dev とコマンドを打てば、ビルドとdevserverのの立ち上げを同時に行うことが可能となっています。今回は"dev"（開発用の意）という名前を付けましたが、この部分は任意の名前でOKです。
▽7.ビルド＆サーバーの立ち上げを確認（さいご）
最後に、ビルド＆devserverの立ち上げを実際に行い、上手くいっているかどうか確認してみましょう。
terminal(bash)
$ npm run dev
ビルドの実行とともにdevServerも起動、自動でブラウザの画面に遷移するはずです。app.jsで記述した、「とんかつ食いたい」も無事出力されていますね。
▼余談：エラーが出てきた時の対処
環境構築系はたいていどっかで沼るんですよね。
webpackでもビルドエラーが起きて詰むことがよくあるのですが、ほとんどの場合エラーコードが原因をちゃんと教えてくれます。僕はエラーコードを翻訳ツールにコピペしたり、ググってみたり、、、と色々とやりながら解決の糸口を見つけて何とか乗り越えています。
▼最後に
実践ではここからCSSや画像のバンドルなど、プロジェクトに応じた設定を行っていくことになります。
間違っている部分や、おかしな記述があればぜひ教えてほしいです。
次回はwebpackでReactを使うための環境構築について書こうと思っています。出来上がり次第こちらの記事にもリンクを貼っておきます！
ほなまた！
↧