webpackとは

モジュールバンドラーの中の１つ。モジュールをバンドルしてくれる役割をもつ。
複数のjsファイルを1つのファイルにまとめて依存関係を解決してくれる。

webpackの導入

webpackを導入するにはプロジェクトフォルダを用意して、ターミナルを立ち上げます。
名前はwebpack_testなど適当につけます。

ターミナルを立ち上げpackage.jsonを作成します。

npm init -y

続いて、webpackとwebpack-cliをインストールします。

npm install -D webpack webpack-cli

-Dオプションをつけることで開発用にインストールされるので、package.jsonのdevDependenciesに記載があるかどうかを確認する。

package.json

  "devDependencies": {
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7"
  }

構成

プロジェクトフォルダにjsファイルを作成していきます。srcフォルダの中にエントリポイントとなるindex.jsと後ほど出力されるmain.jsを読み込むindex.htmlを作成し、以下のようにします。

webpack_test
├─ dist
│   └── index.html
├── node_modules
├── package-lock.json
├── package.json
└── src
    ├── hello.js
    └── index.js

index.js

import { hello } from './hello'
hello();

hello.js

const hello = () => {
    console.log("hello");
}

module.exports = hello

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <script src="main.js"></script>
    <title>Document</title>
</head>

<body>
    <p>Hello Webpack</p>
</body>

</html>

エントリポイント

プログラムの実行を開始するファイル。importなどでjsモジュールを読み込んでいるファイル。今回はindex.jsになる。

実行

webpackをnpm installをしたので、node_modules内にライブラリがある。
実行は以下のコマンドで行う。

npx webpack  --mode development

このコマンドは以下と同様です。

node ./node_modules/.bin/webpack  --mode development

またpackage.jsonに以下を記述し

package.json

  "scripts": {
    "build": "webpack --mode development"
  }

npm run build

としても同様です。
--mode developmentのオプションをつけているのは、ソースマップに対応され、デバッグに便利だったりと開発に向いているからです。上記のコマンドを実行すると以下のようにdistディレクトリにmain.jsファイルが出力されます。

webpack_test
├── dist
│   ├── main.js
│   └── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── hello.js
│   └── index.js

webpack.config.js

webpackの設定ファイル。プロジェクトルートに置きます。なくても実行できますが、エントリポイントがデフォルトでsrc/index.jsになり、出力先がdist/main.jsになります。先ほど出力先がmain.jsでしたが、outputのdistを変更すると出力先が変更になります。pathオブジェクトをrequireで読み込んでいますが、path.resolve(__dirname, "dist")とすることで絶対パスを出力してくれます。

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'main.js',
    }
}

ブラウザで起動

webpack.config.jsにdevServerの設定を追加する。

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'main.js',
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
    }
}

以下のコマンドを実行し、package.jsonにstartを追加する。

npm install -D webpack-dev-server

package.json

  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack --mode development"
  }

以下のコマンドを実行する。

npm start

http://localhost:8080/にアクセスしてHello Webpackが表示されれば成功

参考URL

webpack公式
https://webpack.js.org/

最新版で学ぶwebpack 4入門　JavaScriptのモジュールバンドラ
https://ics.media/entry/12140/

webpack入門
https://qiita.com/hika7719/items/76e87b6ecf308516c514

webpack.config.jsで思ったpath.resolveって何のためにあるの？
https://koukitips.net/post1825/

webpackのインストールと使い方

webpackとは

webpackの導入

構成

エントリポイント

実行

webpack.config.js

ブラウザで起動

参考URL