Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@minato111

webpackとは何なのか?

More than 1 year has passed since last update.

概要

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の設定については別の記事でまとめようと思います。

0
Help us understand the problem. What is going on with this article?
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
minato111
railsを学習中の新米プログラマです。 備忘録的にアウトプットしてます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?