인프런 커뮤니티 질문&답변

이 설정의 경우도 dist 폴더가 생성되어야 하는게 맞는건가요? 

const path = require('path');
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')

module.exports = {
    name: 'numberbaseball-setting',
    mode: 'development', // 실서비스: production
    devtool: 'eval', // 실서비스: hidden-source-map
    resolve: {
        extensions: ['.js', '.jsx']
    },

    entry: {
        // 입력
        app: ['./client'],
    },

    module: {
        rules: [{

            test: /\.jsx?$/,
            loader: 'babel-loader',
            options: {
                presets: [
                    ['@babel/preset-env', {
                        targets: {
                            browsers: ['> 5% in KR'], // browserslist
                        },
                        debug: true,
                    }],
                    '@babel/preset-react',
                    ],
                plugins: [
                    '@babel/plugin-proposal-class-properties',
                    'react-refresh/babel',
                ],
            },
        }],
    },
    plugins: [
        new RefreshWebpackPlugin()
    ],
    // 출력
    output: {
        // 실제 경로
        path: path.join(__dirname, 'dist'),
        filename: 'app.js',
        publicPath: '/dist/', // app.use('/dist', express.static(__dirname, 'dist')
    },
    devServer: {
        publicPath: '/dist/',
        hot: true,
    },
};

{
  "name": "numberbaseball",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve --env development"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/plugin-proposal-class-properties": "^7.12.13",
    "@babel/preset-env": "^7.12.16",
    "@babel/preset-react": "^7.12.13",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "babel-loader": "^8.2.2",
    "react-refresh": "^0.9.0",
    "webpack": "^5.22.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  }
}

제 경우는 위와 같은 설정에서 dist 폴더가 생성이 안되어서 아래와 같이 조치를 했지만 다음과 같은 에러가 발생합니다.

webpack.config.js 상단에

const webpack = require('webpack');

를 추가해주고 

plugins: [
    new RefreshWebpackPlugin(),
    new webpack.LoaderOptionsPlugin({ debug: true }),
],

package.json에 

"scripts": {
  "dev": "webpack serve --env development",
  "webpack": "webpack"
},

를 추가해줘서 npm run webpack을 실행해보았는데요.

다음과 같은 에러가 발생해서 문의 남겨봅니다.

(npm run dev에는 문제가 없습니다.)

[Browserslist] Could not parse C:\Users\프로젝트\react-webgame\package.json. Ignoring it.

internal/crypto/hash.js:58

    throw new ERR_INVALID_ARG_TYPE('data',

    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be one of type string, TypedArray, or DataView. Received type undefined

    at Hash.update (internal/crypto/hash.js:58:11)

    at BulkUpdateDecorator.update (C:\Users\프로젝트\react-webgame\숫자야구\node_modules\webpack\lib\util\createHash.js:51:14)

    at NormalModule.updateHash (C:\Users\프로젝트\react-webgame\숫자야구\node_modules\webpack\lib\NormalModule.js:1129:8)

    at Compilation._createModuleHash (C:\Users\프로젝트\react-webgame\숫자야구\node_modules\webpack\lib\Compilation.js:3085:10)

    at Compilation.createModuleHashes (C:\Users\프로젝트\react-webgame\숫자야구\node_modules\webpack\lib\Compilation.js:3057:10)

    at hooks.optimizeChunkModules.callAsync.err (C:\Users\프로젝트\react-webgame\숫자야구\node_modules\webpack\lib\Compilation.js:2334:11)

    at Hook.eval [as callAsync] (eval at create (C:\Users\프로젝트\react-webgame\숫자야구\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)

    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\프로젝트\react-webgame\숫자야구\node_modules\tapable\lib\Hook.js:18:14)

    at hooks.optimizeTree.callAsync.err (C:\Users\프로젝트\react-webgame\숫자야구\node_modules\webpack\lib\Compilation.js:2294:36)

    at Hook.eval [as callAsync] (eval at create (C:\Users\프로젝트\react-webgame\숫자야구\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)

npm ERR! code 1

npm ERR! path C:\Users\프로젝트\react-webgame\숫자야구

npm ERR! command failed

npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c webpack

npm ERR! A complete log of this run can be found in:

npm ERR!     C:\Users\rlawj\AppData\Local\npm-cache\_logs\2021-02-21T06_35_11_452Z-debug.log

[Browserslist] Could not parse ~~ 부분은 신경 안써줘도 되는지도 궁금합니다.

presets: [
    ['@babel/preset-env', {
        targets: {
            browsers: ['> 1% in KR'], // browserslist
        },
        debug: true,
    }],
    '@babel/preset-react',
    ],