webpack nodejs 질문

Question

안녕하세여 다름이 아니라 제가 react는 webpack 그리고 백엔드는 noejs epxress를 하는데 작업을하다가 갑자기 프론트 터미널에 에러가 뜨는데 보니깐 node 모듈이랑 꼬여서 그런거같더라고요. 이런 경우에는 webpack에 target을 target:node해야되나요?? target:node하니깐 require is notdefind에 react is notdefind 이렇게 뜨더라고요... 대체 원인이 먼지 모르겠습니다. const   path  =  require ( "path" ); const   MiniCssExtractPlugin  =  require ( "mini-css-extract-plugin" ); const   nodeExternals  =  require ( 'webpack-node-externals' );  const   webpack  =  require ( 'webpack' ); module . exports  = {    name :   "wehago" ,    mode :   "development" ,    devtool :   "eval" ,    target :   'node' ,    resolve :  {      extensions :  [ ".js" ,  ".jsx" ,  "css" ,  "scss" ],   },    entry :  {      app :  [ "babel-polyfill" , "./client" ],    },    externals :  [ nodeExternals ()],    externals :  {      "React" :   "react" ,   },    module :  {      rules :  [       {          test :  / \. jsx ? $ / ,          loader :   "babel-loader" ,          options :  {            presets :  [             [                "@babel/preset-env" ,               {                  debug :   true ,               },             ],              "@babel/preset-react" ,           ],            plugins :  [ "react-hot-loader/babel" ],         },          exclude :   path . join ( __dirname ,  "node_modules" ),       },       {          test :  / \. css $ / ,          use :  [ MiniCssExtractPlugin . loader ,  "css-loader" ],       },       {          test :  / \. scss $ / ,          loaders :  [            require . resolve ( "style-loader" ),            require . resolve ( "css-loader" ),            require . resolve ( "sass-loader" ),         ],       },       {          test :  / \. ( ico | png | jpg | jpeg | gif | svg | woff | woff2 | ttf | eot )( \? v= [ 0-9 ] \. [ 0-9 ] \. [ 0-9 ]) ? $ / ,          loader :   "url-loader" ,          options :  {            publicPath :   "./dist/" ,            name :   "[name].[ext]?[hash]" ,         },       },     ],   },    node :  {      net :   'empty' ,      tls :   'empty' ,      fs :   'empty'   },    plugins :  [      new   MiniCssExtractPlugin ({        filename :   "style.css" ,     }),      new   webpack . ProvidePlugin ({        "React" :   "react" ,     }),   ],    output :  {      path :   path . join ( __dirname ,  "dist" ),      filename :   "[name].js" ,      publicPath :   "/dist" ,   }, };

제로초(조현영) · Answer

노드랑 리액트랑 같이 작업하실 때는 노드는 webpack 처리를 하시면 안 되고 react만 따로 웹팩처리하셔야 합니다. 웹팩처리된 react 결과물을 node에서 서버로 서빙하는 프로세스를 갖춰야 합니다.