webpack 설정하기

해당 폴더 만들기

 

npm init으로 설정하기

 

npm i react react-dom

 

npm i -D webpack webpack-cli

npm i babel-loader

npm i @babel/core

npm i -D @babel/preset-env

npm i -D @babel/preset-react

 

을 콘솔창에 입력해준다음

 

webpack.config.js를 파일명으로 파일을 만들어준다.

 

webpack.config.js

webpack.config.js 들어갈 설정에는 위와같이 해주면 된다.

const path = require('path');

module.exports = {
    mode: 'development',
    devtool: 'eval', // hidden-source-map

    resolve: {
        extensions:['.jsx', '.js']
    },

    entry: {
        app: './client.jsx',
    },
    module:{
        rules: [{
            test: /\.jsx?/,
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env', '@babel/preset-react'],
                plugins: ['@babel/plugin-proposal-class-properties'],
            },
        }],
    },
    output: {
        filename: 'app.js',
        path: path.join(__dirname, 'dist'), // 현재 폴더안에 들어있는 dist 
    },

}