create-react-app 쓰지 않고 webpack으로 React 앱 만들기 (3)

webpack config 설정하기

const path = require('path');

module.exports = {
    mode: 'development', // 'production'
    devtool: 'eval', // hidden-source-map
    resolve: {
        extensions: ['.js', '.jsx'],
    },

    // 타겟이 되는 파일
    entry: {
        app: './client',
    },

    // load 할 모듈
    module: {
        rules: [{
            test: /\.jsx?/,
            loader: 'babel-loader',
            options: {
                presets: [
                    ['@babel/preset-env', {
                        targets: {
                            browsers: ['> 1% in KR', 'last 2 chrome versions'],
                        },
                        debug: true,
                    }],
                    '@babel/preset-react'
                ],
                plugins: [
                    '@babel/plugin-proposal-class-properties',
                    'react-hot-loader/babel',
                ],
            },
        }],
    },

    // 추가적으로 할 작업
    plugins: [],

    // 결과물
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'app.js',
        publicPath: '/dist'
    },
}

 

package.json에 스크립트 명령 추가

{
  ...
  "scripts": {
    "dev": "webpack-dev-server --hot"
  },
  ...
}

npm run dev