Help us understand the problem. What is going on with this article?

webpackとは何なのか?

概要

Rails 5.1からwebpacker gemで簡単に導入が可能となったwebpack。

では、webpackとはなんなのか?

railsは使っているけれど、webpackは全く知らない。

そんな方に向けた記事となっております。

自分もwebpackについて理解が浅いですが、webpackについて勉強した成果をここでまとめていこうと思います。

間違いなどもあると思いますが、その際はご指摘いただけると大変助かります。。。

webpackとは何ぞや?

webpackとはNode.jsの中で定義されているモジュールバンドラーツールのこと。

モジュールバンドラーツールとはファイルをまとめるツールを指す。

webpackではrequireなどの依存関係を解決した上でモジュールを一つのファイルにまとめてくれる。

qiita説明画像1.png

この様にファイルをまとめることがwebpackの主要な役割。

なぜ、ファイルをまとめる必要があるのか?

ファイルを一つにまとめることでHTTPリクエストの数を減らすことができる(負荷を軽減)

100個のファイルを100回読み込むことと100個のファイルを一つにまとめたファイルを一回読み込むのでは処理の速度は全然違う

webpackの設定方法

webpackを使用したいディレクトリに移動後

npm init

上のコマンドを打ち込むことで現在のディレクトリにpackage.jsonが作成される

npm install --save webpack
npm install --save webpack-cli

Node.jsのライブラリの一つであるwebpackを

次にpackage.jsonのscriptフィールドにてwebpackを指定する

package.json
scripts{ "build":"webpack"}

scriptフィールドにbuildコマンドでwebpackを使うことを記述

npm run build

これで上のコマンドを打ち込むことでwebpackを使用できるようになった

続いて行なうのはwebpack自体の設定

webpackをインストールした際にwebpack.config.jsというファイルが作られる

webpack.config.jsはwebpackの設定を行なうファイル

此処にエントリーポイントなどの設定を記述していくことでwebpackが動作するようになる

長くなってきたのでwbpack.config.jsの設定については別の記事でまとめようと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした