webpack build & devServer

build 와 개발용 서버가 잘 작동 된다. 아직도 개념이나 전반적인 흐름이 익숙하지가 않은 상태이다 보니 계속 깊게 파고들며 개념을 익히고 공부한 내용을 계속 기록할 계획이다.

가장 큰 뼈대 잡기

import webpack from 'webpack';
import 'webpack-dev-server'; //개발용 서버
import path from 'path';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; 
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; //hot-reloading

const isDevelopment = process.env.NODE_ENV !== 'production';

const config: webpack.Configuration = {
    name: 'netflix-react',
    mode: isDevelopment ? 'development' : 'production',
    devtool: !isDevelopment ? 'hidden-source-map' : 'eval',
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
        alias: {
            '@hooks': path.resolve(__dirname, 'hooks'),
            '@components': path.resolve(__dirname, 'components'),
            '@layouts': path.resolve(__dirname, 'layouts'),
            '@pages': path.resolve(__dirname, 'pages'),
            '@utils': path.resolve(__dirname, 'utils'),
            '@typings': path.resolve(__dirname, 'typings'),
        },
    },
    entry : {
        app: './client'
    }, //입력
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'babel-loader',
                options: {
                    presets: [
            [
              '@babel/preset-env',
              {
                targets: { browsers: ['last 2 chrome versions'] },
              },
            ],
            '@babel/preset-react',
            '@babel/preset-typescript',
          ],
        env: {
            development: {
            plugins: [require.resolve('react-refresh/babel')],
                },    
            },
        },
        exclude: path.join(__dirname, 'node_modules'),
            
    },
    {
        test: /\.css?$/,
        use: ['style-loader', 'css-loader'],
    },
        ],
    },
    plugins: [
        new ForkTsCheckerWebpackPlugin({ async: false }),
        new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' }),
    ],
    output : {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js',
        publicPath: '/dist/',
    }, //출력
    devServer: {
        historyApiFallback: true, // react router
        port: 8080,
        static: { directory: path.resolve(__dirname) }
    }
}

if (isDevelopment && config.plugins) {
  config.plugins.push(new webpack.HotModuleReplacementPlugin());
  config.plugins.push(new ReactRefreshWebpackPlugin());
//config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'server', openAnalyzer: true }));
}
if (!isDevelopment && config.plugins) {
  config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true }));
//config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' }));
}

export default config;