WebPackを手に入れて効率の良いプログラミングを!! 文系学生がインストールしてみた!!

はじめに

インターン先でプログラミングを勉強中の文系学生。

「WebPackのインストールの仕方わかる?」
「? わからないです」
「じゃあ、インストールしといて」
(わからん言うとるやんけ…)

WebPackとは

まぁ、わからないといったところで先に進むわけじゃないし、とりあえず調べてみるか。
フロントエンドエンジニア必見!JavaScript開発現場で人気の「Webpack」とは?によると、

画像などのファイルをまとめることでファイル間の移動を少なくし、ページの読み込み速度を上げる

とのこと。

もう少し詳しく説明すると、画像などのファイルをモジュールとして扱い、バンドルという1つのファイルとして変換してくれる仕組みを持っているらしい。

プログラミングにも直接影響があるんだろうけれど、どちらかと言えば、システムを提供するときに大きな影響を与えるんだろうな。

とりあえずインストールしていくか!!

WebPackのインストール

ferretの記事にもインストールの仕方は書いてあるけれど、社員さんに紹介して貰った現場で使えるwebpack 4入門 – JS開発のモジュールバンドラの方が詳しそうだし、こっちで進めていくか。

WebPackをインストールするためには、Node.jsnpmを導入しておく必要があるみたい。
まだしていない人は、こちらをどうぞ。

インストール

まずは作業用のファイル作るか。

mkdir sample
cd sample

続いて、package.jsonの作成。、

npm init -y

これで情報がある程度書かれたファイルが作れる。

さてさて、webpackのインストールしますか。

npm i -D webpack webpack-cli

package.json

続いて、package.jsonの変更。

{
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "devDependencies": {
    "webpack": "^4.0.0",
    "webpack-cli": "^2.0.9",
    "webpack-dev-server": "^3.0.0"
  }
}

devDependencies以下はインストールした時によって変わるのでご注意を。

webpack.config.js

webpack.config.jsを作成し、このような設定をする。

module.exports = 
  mode: 'development',
  devServer: {
    contentBase: 'dist',
    open: true
  }
};

サーバーの立ち上げ

ここまでこれたらあとは、

npm run start
npx webpack-dev-server

のどちらかを打ち込む。
そうすることで、自動的にブラウザが立ち上がり、コーディングと現状の確認ができるようになるらしい。

まとめ

今回はWebPackの導入をしました!!
少しずつ使い方を覚えていって、効率良くプログラムをかけるようにしていこう!!

参考サイト

ferretの記事-https://ferret-plus.com/6337
現場で使えるwebpack 4入門 – JS開発のモジュールバンドラ-https://ics.media/entry/12140#webpack-setup
webpack 4 入門-https://qiita.com/soarflat/items/28bf799f7e0335b68186
step by stepで始めるwebpack-https://qiita.com/howdy39/items/48d85c430f90a21075cd

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.