zumilogホームCODE3分で理解できる!ド初心者でもわかるwebpackの使い方【入門】2023年5月12日Webサイト制作の現場では、webpackというツールが使われています。この記事ではwebpackの概要から使い方まで初心者向けに、サクッと解説していきます。制作会社では、コーディングの際にwebpackを使うことが多いので身に着けておくと強い武器になりますよ。目次webpackってなんぞや結論:複数のファイルをひとつにまとめてくれるツールですとりあえずwebpackを使ってみるnode.jsをインストールするプロジェクトフォルダを準備するwebpackをインストールjsファイルにコードをコピペ呪文を唱える(コマンドを入力)まとめwebpackってなんぞやwebpack(うぇぶぱっく)は、JavascriptやCSS、画像などのサイトを構成する要素を1つのファイルにまとめてくれるツールです。モジュール=機能バンドル=束ねる、複数のものを一つにまとめたものモジュールバンドラー=機能を一つにまとめるもう少し具体的に説明します。Javascriptを例にして考えてみましょう結論:複数のファイルをひとつにまとめてくれるツールです実際のコーディング時にはJavascriptファイルを分けて、ファイルごとに機能を分けて作ったりします。したときに各ファイルを別々に読み込ませなければいけません。下のような感じになりますね。した読み込ませ方は、読み込ませる順番を間違えると正常に動作しなかったり、通信回数が増えてサイトパフォーマンス的によろしくありません。1つのファイルで全て書けばいいのでは?では、1つのファイルで全て書けばいいのでは?と思うかもですが、保守性の低下を招くため基本はファイルを分割します。そこでwebpackの登場です。webpackを使えば、複数のJSファイルも1つのJSファイルとして吐き出してくれます。webpackを使ってみる色々説明してきましたが、とりあえずwebpackを使ってみましょう。実際ににやった方が理解できると思います。以下は、webpackを使う一連の流れです。呪文を唱えるnode.jsをインストールするwebpackを使うためには、node.jsが必要です。node.jsをまだインストールしていない方は、下記記事が参考になると思うので手順に従ってインストールしてください。QiitaQiitaすでにインストール済の方はこの手順はスキップしてくださいー。プロジェクトフォルダを準備する練習用のプロジェクトフォルダを準備します。ディレクトリ構成は下記を参考に作ってみてください。hello.jswebpackをインストールvscodeでプロジェクトフォルダを開きます。次にターミナルを開いて、下記コードをコピペしてください。-yこれでpackage.jsonがフォルダ内にできたはず次に、下記コードでwebpackをインストールします。webpack-cliこれでnode_modulesフォルダとpackage-lock.jsonがフォルダ内に作られたはずです。jsファイルにコードをコピペ用意している各ファイルに下記コードをコピペしてください。"./hello";hello();ちょっとだけ説明すると、hello.jsの関数をindex.jsで読み込ませています。exportなんてものがあるのならwebpackをなぜ使うんだ?」と過去の私が思ってたので、余談ですがちょい触れます。これは厳密には、import/exportを使用してもモダンブラウザならwebpackなどで処理(トランスパイル)しなくても動作します。古いブラウザ(昔のIE11など)では動きません。それから動かすにはちょっとした工夫が必要です。現在の現場では、このようにwebpackなどのツールを使わずにimport/exportだけでファイル管理するというのはたぶんないと思います。「import/exportはトランスパイル系のツールありき」と覚えておいたらいいと思います。詳しく知りたい方は下記が参考になるはずです。呪文を唱える(コマンドを入力)ターミナルで、下記コードを実行してみてください。webpackすると、distフォルダが生成され、中にmain.jsが作られているはずです。呪文を唱えたことで1つにまとまったJavascriptファイルが生成されました。コードを見てみると、下のような感じになっていると思います。このファイルが動作しているのか確認してみます。distフォルダ内に、htmlファイルを作り、jsファイルを読み込ませてブラウザで表示させてみてください。<h1>webpackの練習だお</h1></body></html>検証ツールを開いて、「こんにちは」が出力されていればOKです。検証ツールでコンソールを開くと、こんな感じでwebpackを使えば複数のファイルもひとつにまとめて管理ができる!というわけです。まとめというわけで、初心者のためのwebpackの使い方でした。今回は普通に出力しただけですがもっと便利な機能があるので次回以降解説していきます。制作会社でのコーディングには、webpackを使ったケースが多いので使い方を把握しておくと「やるやん」ってなるかもです。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。【激ヤバ】高卒工場勤務が「人生終わってる」といわれる理由5つサイト管理人づみ元工場勤務のWebディレクター。現在はWeb制作会社に勤めながら兼業でWeb制作事業を営んでいます。工場退職→フリーのWebライターに転身。→コーディング・プログラミングを独学で学ぶ→Web制作会社に入社。兼業でWeb制作事業。