33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨프론트엔드 개발자를 위한 웹팩
HTMLWebpackPlugin 사용한 webpack.config.js의 빌드 결과 index.html
안녕하세요?교안대로 오탈자 없이 따라해봤는데 제 경우에는,HTMLWebpackPlugin 사용한 webpack.config.js의 빌드 결과가 dist 폴더에 bundle.js와 index.html가 담겼습니다.문제는, 강의에서는 dist > indext.html에 <script type='text/javascript"....></script> 가 아래에 추가가 안되어 있더라구요..ㅠㅠ webpack.config.js에 코드 내용 똑같이 복붙해서 build 했는데 왜 안나오는지 모르겠습니다..
- 미해결프론트엔드 개발자를 위한 웹팩
인프런 캡틴판교님 강의 들을 순서 알고 싶습니다.
강의 정말 최고입니다.!! 인프런에서 캡틴판교님 강의를 전부 듣고 싶은데요. 어떤 순서로 듣는 것이 합리적인지 알려 주시면 감사하겠습니다
- 미해결프론트엔드 개발자를 위한 웹팩
바벨없이 import 구문을 빌드한 의도파악하기
안녕하세요 판교님, 강의 섹션에서 질문하신 *다른 분의 글(es6와 es5...)을 보고 글을 남겨요.3:27 부분에서 index.js 파일에서는 ES6 구문을 쓰고,import _ from 'lodash'webpack.config.js 파일에서는 ES5(commonJS) 구문을 var path = require('path')쓰셨더라구요, 모든 브라우저에서 호환 가능하려면 바벨은 필수인데 최신 브라우저는 네이티브 모듈을 지원하니까 별도의 빌드 도구 없이 모듈을 로드할 수 있으니 편의상 진행하신거라고 이해하면 될까요?
- 미해결프론트엔드 개발자를 위한 웹팩
chunkhash 사용
실무에서는 캐싱등의 문제로 main.bundle.js와 같이 고정된 filename이 아닌 chunkhash 사용하나요?
- 미해결프론트엔드 개발자를 위한 웹팩
pm install gulp --global
이렇게 뜨는데 해결방법이 있을까요? gulp도 설치 안된것 같아요
- 미해결프론트엔드 개발자를 위한 웹팩
이런질문도 괜찮나요?
안녕하세요? 강의를 처음부터 여기까지 두 번 들어봤는데요, 제가 이해력이 좀 부족해서 아래 이해 한게 맞는지 봐주실 수 있으세요?강의를 듣고 나니까 npm이랑 webpack 이 헷갈리더라구요.제가 강의 안보고 혼자 해보려고 했더니 뭐가 npm이 하는거고 뭐가 webpack인거지? 하는 생각이 들어서 정리해봤어요. (이해한 내용..)npm run build 는 npm이 함.npm init -y *프로젝트 생성 : package.json 도 npm이 만듬그렇다면... webpack은 뭐냐....webpack.config.js < 이거같음이거 만들고 package.json 여기에 "build" : "webpack" 으로 설정해서npm run build하면 (이것도 npm이 함)webpack.config.js 이거 자동으로 읽어서 빌드하면서 처리함.그래서 속성 4가지가 중요한 것 같음. 왜냐면 이게 webpack.config.js 여기 내용이라서..[entry, output, module, plugins]entry 경로 적으면 여기 내용으로 웹팩이 npm으로 빌드할 때 내용을output 으로 결과를 만듬. * 1. 파일이름 설정, 2. 패스 설정해야 함(es6문법)module 이게 loader임. css를 js에 임포트하면(왜하는지는모르겠지만) loader가 잘 처리함.plugins output 될 때 파일에 관여함. 이거 안하고 빌드 하면 js에 css내용이 들어가는데 사용하면 css파일도 따로 만들 수 있음.맞게 이해한 걸까요? 감사합니다!
- 미해결프론트엔드 개발자를 위한 웹팩
__dirname 질문입니당
선생님, output:{ fieldname : 'main.js', path: path.resolve( __dirname, 'dist') }여기에서요,__dirname 대신에 fieldname 을 적어줘야 할 것 같은데 __dirname 를 적은 이유가 뭐에욤?
- 미해결프론트엔드 개발자를 위한 웹팩
플러그인 관련 질문있습니다.
loader는 배열의 순서가 중요하다고 했는데, 플러그인 배열은 순서가 중요하지 않은건가요?? 또 플러그인 배열에 있는 요소들을 사용할 때 module의 rules 배열의 순서가 중요하다고 하셨는데, rules에 플러그인된 객체의 loader를 사용하는 것도 순서가 중요할까요?
- 미해결프론트엔드 개발자를 위한 웹팩
build 후 생성된 bundle.js 가 너무 간략합니다
안녕하세요 캡틴판교 님, 강의 계속해서 잘 듣고 있습니다. 다름이 아니라 알려주신 방법대로 build 하고 난 후, 생성된 dist 폴더 안에 있는 제 bundle.js 파일의 내용이 아래와 같이 너무 간략하게 나옵니다. /******/ (() => { // webpackBootstrap var __webpack_exports__ = {}; var div = document.querySelector('.container'); div.innerText = 'Webpack loaded!! :)'; /******/ })() ; 이게 다 입니다. package.json 도 아래와 같이 알려주신대로 입력을 했고, 다른 파일들도 복사 붙여넣기를 통해 다 그대로 입력-저장이 된 상태인데, 왜 제 bundle.js 파일은 저렇게 간략하게 나오는 건지 모르겠습니다. { ... "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack serve", "build": "webpack" }, ... } } 참고적으로 npm run dev 실행 시 localhost:9000 에서 화면도 잘 나오고, index.js 에서 div.innerText 의 내용을 바꾸면 바로 화면에 적용되는 것도 잘 되는데, build 후 bundle.js 의 결과만 다르게 나오고, 혹시나해서 새 폴더를 만들어 처음부터 다시 해봤음에도 결과가 같네요. 어느 부분이 잘못된 것일까요? 참고로 크롬 개발자 모드에서 bundle.js 에 접근하면 아래 사진과 같이 잘 나옵니다. 그리고 터미널에서 npm run build 실행시 결과도 오류없이 잘 진행되었습니다. > devserver_test@1.0.0 build > webpack asset index.html 429 bytes [emitted] asset bundle.js 180 bytes [emitted] (name: main) ./index.js 96 bytes [built] [code generated] webpack 5.73.0 compiled successfully in 222 ms
- 미해결프론트엔드 개발자를 위한 웹팩
웹팩데브서버에 대해 궁금한점
웹팩5 기준에서 웹팩 데브서버의 필요성에 대해서 궁금합니다 웹팩 커맨드중에 --watch를 하면 코드변경시 빌드가 자동으로 되는걸로 알고있는데 웹팩 데브서버는 여기서 추가적으로 브라우저가 리프레쉬되게 하는데 필요한것인가요? 아니면 웹팩 데브서버 없이도 리프레쉬는 빌드가 변경되면 자동으로 되는건가요?
- 미해결프론트엔드 개발자를 위한 웹팩
devServer 질문
안녕하세요! devServer 실습 중 질문이 있습니다. 플러그인은 빌드 결과물에 어떤 영향을 주는 거라고 하셨고, html-webpack-plugin 역시 빌드 결과물을 포함한 html파일을 만들어주는 역할을 하는 것으로 이해했습니다. dev-server 는 결과물을 만들지 않고 메모리에 빌드하여 실행한다고 하셨는데요, 그래서 html-webpack-plugin 을 이용해 빌드 결과물을 만들지 않아도 dev-server 를 돌릴 수 있을거라고 생각했는데 플러그인 부분을 주석처리하니 dev 서버에서 404 오류가 떠서요! 혹시 어떤 이유인지 알 수 있을까요? 그리고 해당 플러그인 없이 index.html 파일에 dev server 로 접근하는 방법이 있을까요? webpack.config.js localhost:9000 접근시 localhost:9000 localhost:9000/ localhost:9000/index loacalhost:9000/index.html 로 접근해도 모두 404로 동일합니다
- 미해결프론트엔드 개발자를 위한 웹팩
웹팩 로더 버전 관리
안녕하세요 판교님, 질문이 있습니다 1. 웹팩4 또는 5 등등 버전마다 호환이 되는 게 있고 안되는 버전이 있는 것 같습니다. npm install css-loader@3 file-loader@5 style-loader@1 각각의 로더들이 호환되는지 여부를 어디서 체크할 수 있나요? (웹팩4에서는 어디까지 호환되는지를 찾고 있는데 공식문서를 봐도 해답을 못찾겠네요)
- 미해결프론트엔드 개발자를 위한 웹팩
devDependencies와 build
이전 강의에서 devDependancies에 있는 라이브러리들은 npm run build될때 배포가 되지않는다는 식으로 알려주셨었는데 이 강의에서는 package.json 파일에서 webpack은 devDependancies에 있는데 "scripts" : { "build" : "webpack" } 이라고 써서 돌아가는 것인가요??? 이해가 되지않습니다 ㅠㅠㅠ
- 미해결프론트엔드 개발자를 위한 웹팩
webpack-dev-server 실행시 index.html 안쓰는 법
안녕하세요 강사님! 웹팩 강의 너무 잘 보고 있습니다!! 드리고 싶은 질문은, 제가 webpack-dev-server실행 시 index.html을 안불러오고 main.js를 통해 App.vue를 실행시키고 싶은데, 옵션을 어떻게 설정해야 할까요? 참고하고 있던 소스가 vue-cli를 사용하고 있어서 vue.config.js 옵션 설정과는 조금 다른지 헷갈리네요..!
- 미해결프론트엔드 개발자를 위한 웹팩
webpack-dev-server 실행 후 매번 업데이트시 console 창 기본 메세지 숨길 수 있을까요?
`$ npm run dev` 실행 후 console 창에 아래와 같이 출력되잖아요 ``` [HMR] Waiting for update signal from WDS... [webpack-dev-server] Hot Module Replacement enabled. [webpack-dev-server] Live Reloading enabled. ``` 그리고 업데이트(저장)하면 아래와 같이 출력이 되고 ``` [webpack-dev-server] App updated. Recompiling... [webpack-dev-server] Nothing changed. ``` 기본으로 세팅되어 출력되는 console.log()를 비활성화 하고 싶은데 어떻게 설정하면 되는지 문의드립니다.
- 미해결프론트엔드 개발자를 위한 웹팩
웹팩의 등장배경 관련해서 문의드립니다!
안녕하세요 Vue 끝장내기 강의를 먼저 듣고 온 뷰린이입니다. 먼저 올려주신 강의들 너무너무 잘 듣고 있습니다. 다름이 아니라 웹팩 등장배경에 관련한 이야기를 하시면서 파일 단위의 자바스크립트 모듈 관리의 필요성을 언급하셨습니다. 저는 해당 부분을 '모듈 관리 기능을 commonJS와 AMD와 같은 라이브러리로 사용하다가 그 필요성이 더욱 강조되면서 ES6부터는 언어 레벨까지 구현되었다.' 로 받아들였습니다. 그래서 어떤 관점에서 모듈 기능의 필요성이 웹팩의 등장 배경과 관련이 있는지 이해가 잘 되지 않습니다. 답변 부탁드리며 항상 좋은 강의 감사드립니다!
- 미해결프론트엔드 개발자를 위한 웹팩
배포시 질문
배포시에도 html플러그인 을 사용하고 싶다면 dependencies 이쪽에도 플러그인 을 추가 하면되는건가요?? 혹시 devDependencies 와dependencies 를 나누는 이유를 명확하게 알고싶은데 devDependencies로 테스트를 하고 배포할때 devDependencies안에 있는 파일들을 전부 dependencies안에 다운을 받는 방식도 있나요 ??
- 미해결프론트엔드 개발자를 위한 웹팩
--output=public/output.js 오류 문의
`webpack.config.js` 사용하지 않고, `package.json`안에 `scripts`를 이용하여 강의 내용처럼 커스텀명령어 입력 후 $ npm run build 했는데 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build" : "webpack --mode=none --entry=src/index.js --output=public/output.js" }, [webpack-cli] Error: Unknown option '--output=public/output.js' 터미널에서 output 에러가 생기는데 원인이 뭔지 찾이 못해 문의드립니다.
- 미해결프론트엔드 개발자를 위한 웹팩
npm i vue -D 설치시 다른 여러 폴더들이 생성됩니다.
npm i vue -D 로 설치를 진행했더니 선생님과는 다르게 여러 폴더들이 많이 생성이 되었는데 혹시 이유를 알 수 있을까용?
- 미해결프론트엔드 개발자를 위한 웹팩
main.js태그
안녕하세요 판교님lodash라이브 러리를 불러와서 CDN방식을 안쓰는 건이해가 가지만 index.js를 연결하는 script태그가 갑자기 왜 main.js를 연결하는 태그로 바뀐지 궁금합니다 <html> <head> <title>Webpack Demo</title> <!--<script src="https://unpkg.com/lodash@4.16.6"></script>-->//지움:lodash로 CDN 대체 </head> <body> <!--<script src="src/index.js"></script>--> //왜 대체되나요? <script src="dist/main.js"></script> //webpack으로 빌드한 결과물 </body> </html>