webpack 入門 導入と基本的な使い方
webpack とは
フロントエンドの開発をしていると、html, css, javascript, jpg ファイルなどいろいろなファイルを作成します。
そして、それらが複雑に組み合わさって動くことになります。
webpack を使うと、それらの必要なファイルを自動で bundle (束ねる)してくれます。
nodeをインストールする
公式からNode.jsをダウンロードして、PCにインストールしてください。
プロジェクトを初期化する
今回はwebpack-testというディレクトリ(フォルダ)を作り、そこで作業をすることにします。
ディレクトリを作成したら、そのディレクトリに移動してから以下のコマンドを実行します。
$ npm init -yこのコマンドを実行すると、webpack-test というディレクトリがプロジェクトとして初期化されます。
プロジェクトというのは一つのアプリケーションのようなものです。
コマンドが成功すると、package.json というファイルが作成されます。
このファイルは、このプロジェクトの情報が記載されたファイルです。
名前、バージョン、どのようなモジュールを使うか、などが記載されます。
私の環境で作成された package.json は以下でした。node のバージョンによっては異なる部分もあるかもしれませんが、大体このようなファイルになると思います。
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
htmlとjsファイルを作成する
次にプロジェクトの中に index.html と index.js を作成しましょう。
プロジェクト内に src というディレクトリを作成します。今回はこの src の下にソースファイルを配置します。
そして、src の下に index.html と index.js というファイルを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>webpackのテスト</title>
</head>
<body>
<h1>webpackのテストです</h1>
<script src="index.js"></script>
</body>
</html>function hoge(){
return 'hoge';
}
console.log(hoge());
webpack をインストールする
続いて、このプロジェクトで webpack が使えるようにするために、webpack をインストールします。
$ npm install -D webpack webpack-cliwebpack というのは webpack 本体です。
webpack-cli というのは、webpack をコマンドで実行できるようにするためのものです。
cli というのは、IT分野では良くでてくる単語で、「コマンド」を指します。
-D というオプションを指定していますが、これは「開発用にこれらのモジュールを使います」という意味です。今はそこまで気にしなくて良いです。
インストールが完了したら、package.json を見てみます。
先ほど、package.json にはどのようなモジュールを使うかが記録されると書きました。
以下のように、一番下に webpack と webpack-cli という記述が追加されました。
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.2.0",
"webpack-cli": "^4.1.0"
}
}
このように、package.json をみると、このプロジェクトではこの二つのモジュールがインストールされていることが分かります。
webpack を実行してみる
いよいよ、webpack を実際に実行してみます。
npx webpack と入力して実行します。
$ npx webpack
[webpack-cli] Compilation finished
asset main.js 15 bytes [emitted] [minimized] (name: main)
./src/index.js 15 bytes [built]
webpack 5.2.0 compiled successfully in 313 ms
何やら出力がされて、最後に successfully という文字が出て完了しました。
無事に完了すると、プロジェクト内に dist というディレクトリが作成され、その中に main.js というファイルができます。
console.log("hoge");これが webpack によって生成されたファイルです。
今は javascript ファイルが一つしかないので、出力内容も index.js とほとんど変わっていませんが、hoge という関数を宣言していた部分がなくなっているのが分かります。
ただ、処理自体は index.js と同じですね。
では、先ほど実行した npx webpack を少し変えてみます。
$ npx webpack --mode=development
[webpack-cli] Compilation finished
asset main.js 855 bytes [emitted] (name: main)
./src/index.js 15 bytes [built]
webpack 5.2.0 compiled successfully in 94 msmode というオプションに development を指定して実行しました。
完了したら、src/main.js を見てみます。
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is not neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
/******/ (() => { // webpackBootstrap
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: */
eval("function hoge(){\n return 'hoge';\n}\n\nconsole.log(hoge());\n\n\n//# sourceURL=webpack://webpack-test/./src/index.js?");
/******/ })()
;先ほどの出力と比べて、内容が多くなりました。
これは development モードを指定したために、開発用の出力が追加されたためです。
このように、webpack のオプションを使うことで、出力内容を変更することもできます。
今回の以上です。
次回は、複数ファイルがあるケースの動作について確認してみたいと思います。