[frontend] Webpack 設定更新

README.md

@@ -183,8 +183,8 @@ Webサーバーは特に想定していませんが、コンテンツのビル
 - `/frontend/src/js/settings.js` を作成し、環境依存する値 (APIサーバーのURL、末尾に / を含まないもの) を定義します。
     - `export const apiServerURLBase = 'http://HOSTNAME';`
 - 以下のコマンドで公開ファイル群をビルドします。
-    - `$ yarn run webpack`
-        - 本番モードでビルドするには `$ yarn run webpack --production` とします。
+    - `$ yarn run dev`
+        - 本番モードでビルドするには `$ yarn run build` とします。
         - 本番モードでの出力には、mapファイルが含まれず、CSSおよびJavaScriptファイルがMinifyされたものになります。
 - `/frontend/public/` 以下に作られたファイルを、任意のWebサーバーの公開ディレクトリーに配置します。
     - アーキテクチャー全体図では Web Server に相当します。

frontend/webpack.common.js

@@ -8,13 +8,8 @@ const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const TerserJSPlugin = require("terser-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const globule = require("globule");
-const args = require("args-parser")(process.argv);
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
-// 環境名
-const IS_DEVELOP = !("production" in args);
-// ソースマップを生成するかどうか
-const USE_SOURCE_MAP = IS_DEVELOP;
 // ビルド先パス
 const DEST_PATH = path.join(__dirname, "./public");
 
@@ -135,7 +130,4 @@ for (const [targetName, srcName] of Object.entries(getEntriesList({ejs: "html"})
   }));
 }
 
-// console.log(app);
-// console.log(app.plugins);
-
 module.exports = [app];

frontend/webpack.dev.js

@@ -1,16 +1,19 @@
+// 各種プラグインのロード
 const path = require("path");
 const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
+
 // ビルド先パス
-const DEST_PATH = path.join(__dirname, "./public");
+const DEST_PATH = path.join(__dirname, './public');
 
+// 開発用の設定追加分
 module.exports = merge(common[0], {
     mode: 'development',
-    devtool: 'source-map',        
+    devtool: 'source-map',
     devServer: {
         contentBase: DEST_PATH,
         watchContentBase: true,
         port: 3000,
         open: true,
     },
-})
+})

frontend/webpack.prod.js

@@ -1,7 +1,9 @@
+// 各種プラグインのロード
 const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 
+// 本番用の設定追加分
 module.exports = merge(common[0], {
     mode: 'production',
     devtool: false,
-});
+});