Zenn
🤖

【学習メモ】webpack.config.jsを理解する

2022/05/09に公開
JavaScript
webpack
tech

はじめに

webpack.config.jsファイルでよく使われるエントリのメモ。

webpack.config.jsについて、まずはサンプルコード

webpack.config.js
const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: {
    index: path.join(__dirname, 'src', 'index.js')
  },
  output: {
    path: path.join(__dirname, 'out'),
    filename: 'main.js'
  },
  devtool: 'cheap-module-eval-source-map',
  target: 'node',
  module: {
    rules: [
      {
        test: /.js$/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    externalPlugins
  ]
}

entryとoutputについて

  • entry: webpackがビルドする際に開始点となるJSファイルを設定
  • output: ビルドファイルの設定。どこにどのようなファイルを出力すればよいか設定している。

具体的なコード

webpack.config.js
const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: {
    index: path.join(__dirname, 'src', 'index.js')
  },
  output: {
    path: path.join(__dirname, 'out'),
    filename: 'main.js'
  },
...
}

entryエントリの設定

該当箇所

entry: {
	index: path.join(__dirname, 'src', 'index.js')
},

これは、webpackがビルドした際に「./src/index.jsというファイルを探して読み込んでね。」という設定をしている。

まずpath.joinでパスを連結してくれていて、上記だと./src/index.jsというパスにしてくれている。

これを使うメリットとしては、macやwindowsなどの開発環境によって/が¥になったりするがそれを防ぐことができる。
そしてNode.jsの標準モジュールのpathを読み込ませて使用しているので、path.joinとして使用できる。

__dirnameはNode.jsで用意されているグローバル変数で、現在実行中のソースコードが格納されているディレクトリパスが格納されている。
簡単に言うと、手軽に絶対パスの記述ができるもの。

ちなみに、entryの設定でindex: ~~~~となっている、このindexというのがチャンクとなり、outputエントリなどで[name]とするだけで"index"という文字列が割り当てられるようになる。

outputの設定

該当箇所

output: {
	path: path.join(__dirname, 'out'),
	filename: 'main.js'
},

outputの設定箇所では、pathとfilenameが使われている。

  • path: どのディレクトリに出力するかを指定している。
  • filename: どのファイルに出力するかを指定している。

devtoolの設定

devtool: を設定することによって、ソースマッピングのスタイルを選択して、デバッグプロセスを強化できる。
指定可能な値はstringとfalse。
stringの具体的な値としては、'cheap-module-eval-source-map'や'source-map'を指定する。

targetの設定

該当箇所

target: 'node',

target: を設定することで、特定の環境をターゲットにするようにwebpackに指示する。
今回は、'node'と指定しているので、Node.jsのような環境で使用するためにコンパイル指定いる。

moduleの設定

module: オプションはプロジェクト内の様々なタイプのモジュールがどのように処理されるかを設定する。

要するにwebpackが特定のmoduleをどう扱うかを決定している。
webpackでのmoduleはJavaScriptやCSSファイルを指す。
ここでは、Ruleモジュールについて設定されているので、詳しく見ていく。

// ...
module.exports = {
// ...
  module: {
    rules: [
      {
        test: /.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader'
          }
        ]
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'babel-loader'
          },
          {
            loader: 'react-svg-loader',
            options: {
              jsx: true
            }
          }
        ]
      }
    ]
  },

// ...
}

moduleのruleエントリについて詳しく

rule.test

rule.test: は拡張子を設定するイメージ。
webpackでいうmodule(JavaScriptやCSSなど)を設定するということ。
今回で言うと、拡張子が.jsなので、test: /.js$/と設定しています。
※jsxもマッチさせようと思うとtest: /\.jsx?$/,こんな感じ。
※ただし、これは'x'という文字は?（オプショナル）なので、'js'という文字列でもマッチする。

rule.loader

loaderは、読んで字のごとくローダーの種類を指定する。

該当箇所

{
	test: /.js$/,
	loader: 'babel-loader'
},

上記は、拡張子が.jsなので、JavaScriptファイルをbabel-loaderとして読み込む設定をしている。

resolve, aliasの設定

webpack.config.js
// ...

  resolve: {
    alias: {
      '@alias/components': path.resolve(__dirname, '../src/components'),
      '@alias/src': path.resolve(__dirname, '../src'),
    }
  },

// ...
hoge.js
// (resolve.aliasを使用しない場合)

import MyComponent from './../../../components/MyComponent'
import { someSrc } from './../../src/constants'
hoge.js
// (resolve.aliasを使用した場合)
// 絶対パスを変数っぽく使えるように設定できる。

import MyComponent from '@alias/components/MyComponent'
import { someSrc } from '@alias/src'

Discussion