React를 하고있는데 webpack-dev-server에 대해 질문드립니다!

Question

먼저 webpack-dev-server 를 설치했습니다. npm i -D webpack-dev-server package.js 내용에 아래와같이 생긴걸 확인하고 &#34;webpack-dev-server&#34;: &#34;^3.8.0&#34; webpack.config.js의 내용은 다음과 같습니다. const path &#61; require('path'); module.exports &#61; { name: 'wordreplay-setting', mode: 'development', // 실서비스 : production devtool: 'eval', //실서비스 : hidden-source-map // entry에서 확장자를 생략할 수 있도록 resolve를 등록 resolve: { extensions: ['.js','.jsx'] }, entry:{ app: ['./client'], }, //입력 module: { rules: [{ test: /\.jsx?/, loader: 'babel-loader', options:{ presets: ['&#64;babel/preset-env','&#64;babel/preset-react'], plugins: ['&#64;babel/plugin-proposal-class-properties'], }, }], }, output:{ path: path.join(__dirname,'dist'), filename: 'app.js' }, //출력 }; entry에 있는 client.jsx의 내용입니다. const React &#61; require('react'); const ReactDom &#61; require('react-dom'); const { hot } &#61; require('react-hot-loader/root'); const WordRelay &#61; require('./WordRelay'); // const Hot &#61; hot(WordRelay); ReactDom.render(<WordRelay />, document.querySelector('#root')); 터미널에서 npm run dev 를 통해 webpack 빌드를 해주면 아래와같이 뜹니다. [root&#64;mhj6380-69469 zerocho]# npm run dev > zerocho&#64;1.0.0 dev /home/react/zerocho > webpack-dev-server ℹ &#xff62;wds&#xff63;: Project is running at http://localhost:8080/ ℹ &#xff62;wds&#xff63;: webpack output is served from / ℹ &#xff62;wds&#xff63;: Content not from webpack is served from /home/react/zerocho [BABEL] Note: The code generator has deoptimised the styling of /home/react/zerocho/node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB. ℹ &#xff62;wdm&#xff63;: Hash: f3672ab7f842b4ac315f Version: webpack 4.39.2 Time: 19368ms Built at: 08/25/2019 3:48:28 PM Asset Size Chunks Chunk Names app.js 1.29 MiB app [emitted] app Entrypoint app &#61; app.js [1] multi (webpack)-dev-server/client?http://localhost:8080 ./client 40 bytes {app} [built] [./WordRelay.jsx] 4.38 KiB {app} [built] [./client.jsx] 303 bytes {app} [built] [./node_modules/react-dom/index.js] 1.32 KiB {app} [built] [./node_modules/react-hot-loader/root.js] 807 bytes {app} [built] [./node_modules/react/index.js] 189 bytes {app} [built] [./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {app} [built] [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {app} [built] [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {app} [built] [./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.85 KiB {app} [built] [./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {app} [built] [./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {app} [built] [./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {app} [built] [./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 162 bytes {app} [built] [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {app} [built] &#43; 35 hidden modules ℹ &#xff62;wdm&#xff63;: Compiled successfully. 컴파일이 정상적으로 되었다고 뜨며 웹팩빌드는 잘 되는거같은데 제가궁금한건 1. 위 내용에서 &#xff62;wds&#xff63;: Project is running at http://localhost:8080/ 라고 나와있는데 localhost:8080으로 접근해도 프로젝트가 왜 안나타나는지 모르겠습니다 ㅠ (서버의 index.html 로 접근하면 잘나옴) 2. webpack-dev-server 가 설정되면 저장했을때 자동으로 webpack 빌드가 되어야 하는데 안되고있는 이유도 궁금합니다.

React를 하고있는데 webpack-dev-server에 대해 질문드립니다!

0개의 답변

#webpack-dev-server 목록