33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결프론트엔드 개발자를 위한 웹팩
module 문법 질문.
강의에서 다루진 않았지만 혹시 import 문법관련해서 webpack.confing.js파일에서는 path를 require로 불러오는데 이를 package.json에 type : mpdules를 설정해도 import문법을 사용할 수 없는 이유가 있을까요??
- 미해결프론트엔드 개발자를 위한 웹팩
htmlWebpackPlugin 질문
htmlWebpackPlugin 이 플러그인을 사용하는이유가 파일을 추가할떄마다 루트폴더에있는index.html에 직접 추가하기가 번거롭기때문에 사용한다고 생각해도되나요?
- 미해결프론트엔드 개발자를 위한 웹팩
entry,output 파일 경로 설정 질문.
webpack.config.js 설정중에서 output을 설정할떄 파일에 접근하기떄문에 filename,path을 사용하여 설정해주셨는데, entry는 왜 문자열을 그대로 사용하나요?
- 미해결프론트엔드 개발자를 위한 웹팩
웹팩 이미지로더 질문
{ test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } 이부분에서 name의 [name].[ext]?[hash] 이건 무슨뜻인가요? 해석해주실 수 있으실까요? ㅠ
- 미해결프론트엔드 개발자를 위한 웹팩
babel-loader 궁금증
강사님 안녕하세요. 강의 구매 후, 처음으로 질문을 하나 남겨 봅니다. 요즘 리액트로 개발을 해보고 있는데 웹팩에서 babel-loader 가 transfile 을 수행한다는 걸 강의로 알게됐네요. 리액트로 로컬환경에서 npm run start 로 서버 띄어놓고 개발을 하면, 소스 수정할 때마다 자동컴파일이 진행되던데요. 아마 이때 babel-loader 가 transfile 를 하는 듯 한데요. 소스파일의 갯수가 늘어날수록 이 compile 속도가 점점 늘어나는 것 같습니다. 혹시 소스파일이 늘어나도 Compile 속도를 빠르게 유지할 수 있는 웹팩 설정 같은데 있을까요? 이런 문제를 부딪혀보고 해결해보신 적이 있으신지 너무 궁금합니다.
- 미해결프론트엔드 개발자를 위한 웹팩
devser 출력 오류
튜토리얼 대로 작성한 뒤에 실행 시키면 로컬 호스트로 연결 시도하면 crbug/1173575, non-JS module files deprecated. 라는 에러가 콘솔에 나타나고 사이트를 표시할 수 없다고 나옵니다. 그런데 밑에 다른 네트워크 주로소 연결시 정삭적으로 됩니다. 이게 어떻게 된건가요? 그리고 어떻게 하면 해결이 될까요? 그리고 다른 네트워크 주소로 돌린 것도 index.js를 변경하여 저장하면 실시간적으로 변경이 안됩니다. 왜 이런건가요?
- 해결됨프론트엔드 개발자를 위한 웹팩
webpack npm 설치시 라이센스 파일 질문 입니다.
npm run webpack 을 하고 나면 dist폴더에 main.js와 main.js.LICENSE.txt 파일 같은 것이 생기는데 라이센스면 이를 사용하는데 뭔가 제한이나 문제가 있는 건가요? 예를 들어서 npm 설치 후 git 같은곳에 커밋 할 시 저작권 사용 혹은 다른 문제가 있거나 아님 프로젝트 진행시 라이센스 파일이 있거나 없으면 크게 문제가 되는 경우가 있는 건가요? 그리고 npm run webpack 같이 npm run 설치때 이러한 라이센스 파일을 안받게 하는 방법은 혹시 어떤게 있는지 알려 주실 수 있나요? 그리고 모듈화 import export 테스트 해보고 있습니다만 여기서 실행이 안되고 오류로 Uncaught SyntaxError: Cannot use import statement outside a module 파일이름이나 경로가 틀린게 아닌데도 이렇게 나옵니다. 어떻게 해결하면 되는 건가요? 또 dev server 쪽 하는데 있어서 알려준 튜토리얼 대로 진행 후 js파일의 텍스트 값을 바꾼뒤 저장해도 실시간적으로 값이 바뀌지를 않습니다. 이건 왜 이런건가요?
- 미해결프론트엔드 개발자를 위한 웹팩
배포시 질문 있습니다.!
<script src="./dist/bundle.js"></script> 안녕하세요. 궁금한점이 생겨 질문남깁니다. 배포시에 index.html에 위에 코드를 넣어주어야하나요? 웹팩 데브 서버시에는 파일이 실제로 만들어 지지않고 메모리에만 만들어 지니까 안적어주었는데, 실제로 배포할때는 dist폴더가 생기는데 위에 코드를 넣어주어야 할까요?
- 미해결프론트엔드 개발자를 위한 웹팩
entry 진입점
혹시 entry 진입점이 1개든 여러개든 bundle.js 하나로 빌드가 되는 것 같은데 이 진입점들이 많은 건 로딩속도 측면에서 상관이 없을까요? 좋은강의 감사합니다!
- 미해결프론트엔드 개발자를 위한 웹팩
HtmlWebpackPlugin 질문
HtmlWebpackPlugin이 css파일과 js파일에 대해서 link태그와 script태그 부분을 자동화한다는 점은 이해했습니다. 그렇다면 배포하고 싶은 html파일이 5개가 있을 때 이 5개의 html파일들을 각각 new HtmlWebpackPlugin의 객체로 설정해야 css파일 및 js파일들에 대해서 자동으로 설정해주나요? 좋은강의 감사합니다.
- 미해결프론트엔드 개발자를 위한 웹팩
MiniCssExtractPlugin과 style-loader
MiniCssExtractPlugin과 style-loader를 각각 언제 사용해야할까요? 찾아보니 style-loader는 css파일을 추출하는 게 아니라서 더 빠르다고 하는데 둘 중 아무거나 사용해도 무관할까요?
- 미해결프론트엔드 개발자를 위한 웹팩
node_modules 질문입니다.
안녕하세요! 강의 재미있게 잘 듣고 있습니다😀 npm 을 사용하면 node_modules에 직접 라이브러리를 다운받아 사용할 수 있다고 해주셨는데요 (로컬에 저장), 기존의 script 태그를 사용하는 경우에는 해당 라이브러리의 코드를 어디에 저장해서 사용하는지 궁금합니다. html이 불려올 때 마다 script에 적혀있는 라이브러리를 다운로드 받는건가요..? 감사합니다!
- 미해결프론트엔드 개발자를 위한 웹팩
핸드북 내용 누락
https://joshua1988.github.io/webpack-guide/tutorials/plugins.html 핸드북의 Plugins 페이지의 내용이 없는 것으로 나옵니다. 확인부탁드립니다.
- 미해결프론트엔드 개발자를 위한 웹팩
main.css
main.css 라고 빌드가 되는걸 확인했습니다~ 궁금한점은파일명은 어떻게 main 이라고 지정이 되는건가요??
- 미해결프론트엔드 개발자를 위한 웹팩
html 페이지가 여러개인 경우는 어떻게 구성해야 할까요?
안녕하세요~ 한 페이지로 셋팅하는 것은 이제 마스터 했습니다~ 다만 산출물이 SPA가 아닌 1) 1번 html에서 링크를 클릭했을 때 2번 html로 페이지가 넘어가도록 보여져야 하는 경우 2) 여러 페이지 작업시 각각의 페이지 뷰를 확인해야 하는 경우 이경우 실무에서는 webpack 세팅이 어떻게 되어야 하는지 궁금합니다~!
- 해결됨프론트엔드 개발자를 위한 웹팩
devtool: #eval-source-map
테스트할 때에는 좋은데 실제 배포될 때에도 보통 #eval-source-map를 사용하나요? 코드가 노출되는거 같아 별로 좋아보이지 않은거 같아서요!
- 미해결프론트엔드 개발자를 위한 웹팩
npm run serve, npm run build
간단한 질문입니다만.. npm run serve 와 npm run build 는 사용환경이나 버전 차이인가요? 아니면 각자 다른 명령을 의미하는 것인가요..,?
- 미해결프론트엔드 개발자를 위한 웹팩
웹팩 버전업으로 인한 질문
main.js 부분은 웹팩의 버전업때문에 조금 다른거 같아요. 이 부분에 대한 설명은 npm으로 설치(package.json)의 파일들이 컴파일 되어 ./dist/main.js 로 들어가서 구성되어진다 라고 받아들이고 넘어가면 될까요!?
- 미해결프론트엔드 개발자를 위한 웹팩
배포시 질문있습니다.
webpack dev server은 프로젝트 진행하면서 쓰이고, 나중에 배포하려면 dist폴더만 사용하면 되나요? 또한 배포시에는 webpack dev server가 아예 안 쓰이는지 궁금합니다.
- 미해결프론트엔드 개발자를 위한 웹팩
es6와 es5 문법에 대해서
강의때 ES6 의 import _ from 'lodash'; 와 ES5 의 var path = require('path'); 가 같은 문법이라고 하셨는데, 그렇다면 webpack.config.js 파일에서 import path from 'path'; 라고 사용하지 않은 이유가 있는지 궁금해요~