webpack.config.jsの設定メモです。
npm install --save-dev webpack webpack-cli
webpack
、webpack-cli
をインストールすることで、webpackのコマンドが実行可能となります。
下記のコマンドでwebpack自体は実行出来ます。
node_modules/.bin/webpack --entry ./src/index.js -o dist
エントリーポイントのjsファイルと、生成するファイルのディレクトリを指定しています。
また、コマンド引数ではなく、webpack.config.js
に設定を記述することができます。
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
devtool: 'eval-source-map',
};
その名の通り、entrypointを設定出来ます。
生成するファイル、アウトプットするファイルのディレクトリ(path)と、ファイル名(filename)を設定しています。
必須ではありませんが、devtool: 'eval-source-map'
とすることで、ソースマップファイルを生成することができます。
ビルドしたコードをオリジナルのソースのフォーマットに戻すことで、ブラウザのデバックツールを使えるようにしてくれます。
以下は例ですが、package.json
にwebpackの実行コマンドを設定しておくと、ビルドコマンドを簡略化できます。
{
"name": "get-started-firebase",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode=development"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"firebase": "^9.6.7"
},
"devDependencies": {
"webpack": "^5.69.1",
"webpack-cli": "^4.9.2"
}
}
webpackの知見が溜まり次第、追記していきます。Comming Soon!!