'use strict';
import { Configuration } from 'webpack';
import 'webpack-dev-server';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
const isDev = process.env.NODE_ENV === 'development';
const front: Configuration = {
mode: 'development',
devtool: 'source-map',
entry: './src/index.tsx',
module: {
rules: [
{
test: /\.(ts|tsx)?$/,
exclude: /node_modules/,
use: 'ts-loader',
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: { sourceMap: isDev },
},
],
},
{
test: /\.(bmp|ico|gif|jpe?g|png|svg|ttf|eot|woff?2?)$/,
// ファイルそのまま取り込む
// type: 'asset/resource',
// Base64にして取り込む
type: 'asset/inline',
},
],
},
// 何も設定しないと、webpack内部で __dirname を / に変換する
// 何も設定しないと、webpack内部で __filename を リソースまでのパスそのまま に変換する
node: {
__dirname: false,
__filename: false,
},
// importするファイルの拡張子を省略できるように設定する
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx', '.json'],
},
output: {
filename: "bundle.js"
},
// historyApiFallback
// webpack-dev-serverでSPAをloadするhtmlをserveしている場合、outputに指定した物理pathではdocumentが返却される
// SPAでhistory.pushしたpathでdocumentごとリロードすると、そのpathに対応するhtmlはないので404になる
// ただ、物理パスは存在しないけど論理パスを設定することによってSPAを実現している場合、webpack-dev-serverに対して、物理パスが存在しないリクエストが飛ぶよう設定する
// インデックスページを受けた取ったブラウザが、論理パスを元にフロントエンド側でルーティングを行う
// compress
// webpack-dev-serverが提供するコンテンツをgzip化するかどうかを指定する
// hot
// HMR(Hot Module Replacement)を有効化する
// open
// 初回ビルド完了時にブラウザでインデックスファイルを開く
devServer: {
historyApiFallback: true,
compress: true,
hot: true,
open: true,
port: 4000,
},
// html-webpack-plugin
// webpackでバンドルしたファイルをindex.htmのheadのscriptタグから読み込めるように設定する
// template
// テンプレートで使うファイルを指定する
// hash
// 含まれているすべてのスクリプトとCSSファイルに一意のWebpackコンパイルハッシュを追加する
// キャッシュバスティングに役立つ
plugins: [new HtmlWebpackPlugin({
template: "src/index.html",
hash: true,
filename: 'index.html'
})]
};
export default front;