webpack 4 入門(npm編)

2020/02/27

最近では必須となりつつある webpack4 を npm で構築してみました。
下記を参考にしましたが、かなりわかりやすくおすすめです!

参考:最新版で学ぶwebpack 4入門 JavaScriptのモジュールバンドラ

webpack の特徴

「webpack」 は「gulp」「Grunt 」「Browserify」のようなタスクランナーですが、最大の特徴は「モジュールバンドラ」です。

  • 複数のjsファイルを1つのファイル(main.js や bundle.js)にまとめる
  • まとめることで、HTTPリクエストの数を減らす
  • 「React」「Vue.js」をはじめとしたサードパティの JavaScript と連携して開発できる
  • CSSやリソース(画像など)もバンドルできる

 

gulp で開発してきた場合は、gulp + webpack で運用してるようですが、新規ならば webpack で十分みたいです(開発者の好みか?)。

node.js の確認

node.js のバージョンは13以上


$ node -v
v13.6.0

プロジェクト作成

webpack のテストサンプルを利用するロジェクトを作成する。
また、npm init で package.json も作成しておく。


$ mkdir webpack-test
$ cd webpack-test
$ npm init -y
$ mkdir src

webpack のインストール

devDependencies(-D) で webpack webpack-cli をインストールする


$npm i -D webpack webpack-cli
...
+ webpack-cli@3.3.11
+ webpack@4.41.6
...

JavaScript をモジュールで実装

現時点で、「モジュール方式」で JavaScript を実装することが推奨されている。
※ECMAScript Modules(ES Modules、ESM)

webpack4 では明示的に指定しない場合、以下の設定となります。

  • 「src/index.js」がエントリーポイント
  • 「dist/main.js」が出力ファイル

JavaScript ファイル記述

src/index.js


import { say } from "./module1";
say();

src/person.js


export function say() {
    alert("module1 hello!");
}

webpackビルド

手っ取り早く npm 5.2.0 で追加された「npx」コマンドで webpack ビルドしてみる。
(npm run build で webpack を動作させた方が応用が効くが) 


$ npx webpack
Hash: 58e8f21bff04a84f6d5c
Version: webpack 4.41.6
Time: 247ms
Built at: 2020/02/27 20:49:44
  Asset       Size  Chunks             Chunk Names
main.js  957 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js + 1 modules 96 bytes {0} [built]
    | ./src/index.js 42 bytes [built]
    | ./src/person.js 54 bytes [built]

src/index.js に src/person.js が統合され dist/main.js が書き出される

HTML実装&確認

index.html を作成し「dist/main.js」を読み込む

npm でビルド

npx webpack でなく package.json を設定して npm ビルドする

package.json の設定

  • scripts の build に「webpack」
  • devDependencies に 「webpack」「webpack-cli」のパッケージを記述

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  },
  "devDependencies": {
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  },
  "scripts": {
    "build": "webpack"
  }
}

npm ビルド

npm run build で webpack ビルドされる


$ npm run build
> webpack-test@1.0.0 build /Users/yoo/docker/projects/webpack-test
> webpack
...

webpack.config.js を設定してビルド

webpack.config.js を作成して、「entry」「output」を設定することで、エントリポイント、出力先ファイルをカスタマイズできます。

※前述の通り webpack4 では「src/index.js」「dist/main.js」がデフォルト


module.exports = {
  entry: `./src/index.js`,
  output: {
    path: `${__dirname}/dist`,
    filename: "main.js"
  },
  mode: "development"
};

$ npm run build 

modeを「development」にすると、出力ファイル(main.js)が圧縮されずに書き出されます。

ウォッチを利用するビルド

webpack-dev-server をして、JavaScriptの実装をリアルタイムにブラウザ確認することもできるが、一般的なウォッチを利用してビルドする。

package.json に watch を設定


  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
  },

watch を起動


$ npm run watch

これで、JavaScript を保存すると自動でビルドされます。

カスタムのペジネーションを作る
2020/03/30
node-sass を使って sass をコンパイルする
2020/03/30
Log ファサードでSQLログを分離して書き出す
2020/03/29
いちから始める Docker - 複数のコンテナを使う - (2020年)
2020/03/28
いちから始める Docker - docker-compose を使う - (2020年)
2020/03/28
AWS ECR を使ってみる
2020/03/26
Laravel7 でマルチ認証
2020/03/24
Mac に AWS Client を設定する
2020/03/22
Laravel 7 リリース
2020/03/19
v-html でHTML表示する
2020/03/17
Laravel で Vue コンポーネントを使う
2020/03/15
Laravel で Nuxt.js を使ってみる(Docker環境)
2020/03/15
いちから始める Docker -コンテナをビルド- (2020年)
2020/03/12
いちから始める Docker -起動してみる- (2020年)
2020/03/11
Mac で MySQL(8系)
2020/03/03
composer で vendor がインストールできない
2020/03/02
Eloquent の日付を Carbon で扱う
2020/03/01
webpack 4 入門(npm編)
2020/02/27
[Mac]容量を減らす
2020/02/14
DIコンテナはじめ
2020/02/08
freee SDKを Laravel で使ってみる
2020/02/06
freee API を使ってみる
2020/02/06
Segueを利用しない画面遷移
2020/02/01
Xcode11.3 で XVim2 を利用する
2020/01/31
Codable で JSONを読み込み
2020/01/30
Webpack入門(yarn編)
2020/01/24
MacからLaradock PostgreSQLで接続エラー
2020/01/21
Dockerで不要なコンテナ・イメージを削除
2020/01/18
Mac で Laradock の構築
2020/01/18
yarn インストール&プロジェクト作成
2020/01/12
Laravel 6.x 構築(Homestead編)
2020/01/12
Composer インストール
2020/01/12
nvm インストール
2020/01/12
npm install が Mac でエラー
2020/01/05
HTMLタグでカーソルが同時処理(ミラーリング)されてしまう
2020/01/04
DI(依存性注入)
2019/12/30
[Ubuntu]Let's Encryptで無料の証明書を利用する
2019/12/22
[Apache]Apache2.4のアクセス制限が変更
2019/12/22
[Ubuntu]rootのログインとsudo権限追加
2019/12/22
タミヤ マイコンロボット工作セットをMacに接続してみた
2019/12/21
pgAdimn4 でブラウザで開けなくなる
2019/09/28
Java8 を HomebrewとjEnvで構築
2019/09/28
Android Studio環境構築 2019
2019/09/24
ロケールの再構築
2019/08/27
vagrant グループに Apacheを追加
2019/08/27
Linux2 Apache2 + PHP7.3 + PostgreSQL10
2019/08/25
Anadondaの削除
2019/08/25
[Mac]初期設定メモ(CentOS)
2019/08/21
[Mac]PostgreSQL起動
2019/08/20
[Debian]Node.js安定板インストール
2019/08/09