webpackの設定についてのメモ

2022-03-01

webpack.config.jsの設定メモです。

インストール

shell
1npm install --save-dev webpack webpack-cli

webpackwebpack-cliをインストールすることで、webpackのコマンドが実行可能となります。

webpackの実行

下記のコマンドでwebpack自体は実行出来ます。

shell
1node_modules/.bin/webpack --entry ./src/index.js -o dist

エントリーポイントのjsファイルと、生成するファイルのディレクトリを指定しています。

Webpackの設定

また、コマンド引数ではなく、webpack.config.jsに設定を記述することができます。

javascript
1const path = require('path');
2
3module.exports = {
4 entry: './src/index.js',
5 output: {
6 path: path.resolve(__dirname, 'dist'),
7 filename: 'bundle.js'
8 },
9 devtool: 'eval-source-map',
10};

entry

その名の通り、entrypointを設定出来ます。

output

生成するファイル、アウトプットするファイルのディレクトリ(path)と、ファイル名(filename)を設定しています。

devtool

必須ではありませんが、devtool: 'eval-source-map' とすることで、ソースマップファイルを生成することができます。

ビルドしたコードをオリジナルのソースのフォーマットに戻すことで、ブラウザのデバックツールを使えるようにしてくれます。

その他

以下は例ですが、package.jsonにwebpackの実行コマンドを設定しておくと、ビルドコマンドを簡略化できます。

json
1{
2 "name": "get-started-firebase",
3 "version": "1.0.0",
4 "description": "",
5 "main": "index.js",
6 "scripts": {
7 "test": "echo \"Error: no test specified\" && exit 1",
8 "build": "webpack --mode=development"
9 },
10 "keywords": [],
11 "author": "",
12 "license": "ISC",
13 "dependencies": {
14 "firebase": "^9.6.7"
15 },
16 "devDependencies": {
17 "webpack": "^5.69.1",
18 "webpack-cli": "^4.9.2"
19 }
20}

webpackの知見が溜まり次第、追記していきます。Comming Soon!!

Tech Blog

avatar

ソフトウェアエンジニア。1989年生まれ大阪府岸和田市在住のフリーランス。PHP、バックエンド開発が得意。テニス、フットサル、だんじり、ケツメイシ、競馬、プログラミングが好き!最近はWebフロントエンド沼にハマってます!

Copyright © 2022. Junpeko5's Tech Blog