69,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
webpack.config.js 파일에 common.js 모듈 시스템을 쓰는 이유는 무엇인가요?
es모듈 시스템을 안쓰는 이유가 있나요?
- 해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
npm install -D
npm install -D @babel/preset-env 라 적혀 있는데 실제론 npm install @babel/preset-env 라고 하기도 하고.... -D가 dev에 추가한다. 라고는 알고 있는데, 실제로 바벨 프리셋들은 dev에 했을 때와 아닐때 차이가 없나요? 아니면 차이점으로 어떤 것들이 있나요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
안녕하세요. 웹팩 버전 관련해서 질문이 있습니다.
안녕하세요 강사님! 강의 정말 잘 들었습니다. 웹팩에 대한 개념이 없었는데, 강사님의 강의를 들으면서, 웹팩의 중요성을 깨닫고 기본적인 개념을 습득할 수 있었습니다. 우선 제가 마지막 실습을 진행하면서 버전 관련한 에러때문에 고생을 좀 하면서 몇가지 궁금한게 생겼습니다. webpack4 버전에 맞춰 terser plugin과 copy plugin의 버전을 최신버전으로 설치하니, 빌드시 에러가 발생했습니다. 그래서 버전을 각각 terser-webpack-plugin@4, copy-webpack-plugin@6으로 다운그레이드 시켜 인스톨하고, 강사님이 공지사항에 올려주신 copy-webpack-plugin 코드를 사용하니 빌드가 정상적으로 됐습니다. 여기서 궁금한게, 이제 webpack의 최신버전이 5버전이 되면서, 변경 사항이 많아졌고, 그에 따라 라이브러리에서도 버전업을 하면서 호환성을 맞추는 것으로 알고 있어서, 웹팩과 각 라이브러리의 버전을 안맞출 경우 에러가 발생하는 걸로 파악했습니다. 이에 따라 4버전과 5버전의 차이점이 큰지, 그리고 향후 프로젝트를 진행할 때, 5버전을 쓰는게 좋을지 4버전을 써도 되는지도 궁금합니다. 5버전으로 웹팩을 업그레이드하고 실습 프로젝트를 빌드하니 기존의 설정과 충돌나는 부분이 많을 것 같아서, 여쭤봅니다.
- 해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
안녕하세요 웹팩플러그인 중 BannerPlugin설정 관련 문의드립니다.
안녕하세요 강사님 좋은 강의로 실무에서도 웹팩을 다룰수있게 해주셔서 감사하며 궁금한점이 있어서 질문드립니다. 강의 중 알려주신 BannerPlugin을 적용하려고하는데 production 환경에서는 주석이 제거되서 BannerPlugin이 적용되지않습니다.https://github.com/react-boilerplate/react-boilerplate/tree/master/internals/webpack (현재 저는 위에있는 리액트 보일러플레이트 프로젝트를 커스터마이징해서 사용중입니다) 위 URL에 보이는 내용과같이, 저는 웹팩플러그인 설정파일을 사용중인데, production에서는 TerserPlugin 옵션중 output: {comments: false}가 주석을 제거해서 production에서는 main 청크파일에서 BannerPlugin에 설정한 정보가 보이지 않는 문제가 있습니다. (comments: true로 변경하면 정상적으로 main청크파일에서 BannerPlugin에서 설정한 정보를 지우진않습니다) production 환경에서도 BannerPlugin을 사용하고싶은데, 어떻게하면 좀더 좋은방법이 될지 문의드립니다. 제가 찾아본 솔루션은 TerserPlugin의 옵션중 terserOptions중 preamble을 추가하는것인데 혹시 더 좋은 방법이 있을지 궁금합니다ex) terserOptions: { output: { preamble: "/* 넣고싶은 버전정보 */" comments: false } (https://github.com/terser/terser) // webpack.base.babel.js 은 전역(모든 NODE_ENV 환경에서 작동하는) 웹팩플러그인 설정파일입니다 webpack.base.babel.js plugins: options.plugins.concat([ new webpack.DefinePlugin({ 'process.env': { ... }, }), new webpack.BannerPlugin({ banner: ` Build Date: ${new Date().toLocaleString()} Commit Version: ${commitHash} `, }),]), webpack.prod.babel.js optimization: { minimize: true, minimizer: [ new TerserPlugin({ terserOptions: { warnings: false, compress: { comparisons: false, }, parse: {}, mangle: true, output: { comments: false, ascii_only: true, }, }, parallel: true, cache: true, sourceMap: true, }), ], nodeEnv: 'production', sideEffects: true, concatenateModules: true, runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: 10, minSize: 0, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name(module) { const packageName = module.context.match( /[\\/]node_modules[\\/](.*?)([\\/]|$)/, )[1]; return `npm.${packageName.replace('@', '')}`; }, }, }, },},......
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
webpack optimization minimizer 설정시
Optimization.minimizer를 설정하면 production모드에서 자바스크립트 압축이 해제가 되는데 이건 따로 설정이 필요한 부분인가요?
- 해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
프로젝트 생성
초반에 프로젝트 생성 파트를 보고있습니다. node.js를설치후 강좌에서 본것처럼 npm 을 타이핑 하였지만 Uncaught ReferenceError: npm is not defined 이라는 메세지만 나타납니다. 그리고 프로젝트 생성하실때 강좌에서는 mkdir sample 그리고 cd sample후에 sample npm init를 치시면 프로젝트 생성 이 되는데 저는 mkdir sample을 타이핑하면 Uncaught SyntaxError: Unexpected identifier이 나타납니다. 이유를 알고싶습니다. 강좌보고 5분만에 막히네요 ㅜㅜ;;
- 해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
"웹팩 기본편 - 자주 사용하는 플러그인" 강의내용중 질문이 있습니다.
안녕하세요 웹팩을 webpack.base.babel.js로 따로 관리하는데 2가지 질문이 있습니다. 1. ESLInt: TypeError: filepath.toLowerCase is not a fuction 에러 new webpack.BannerPlugin({ banner: ` Build Date: ${new Date().toLocaleString()} Commit Version: ${childProcess.execSync('git rev-parse --short HEAD')} Author: ${childProcess.execSync('git config user.name')} `,}), 을 추가하니, ESLInt: TypeError: filepath.toLowerCase is not a fuction에러가 잡히는데 혹시 어떻게 처리해야하는지 그리고 무엇때문에 lint에 걸리는지 궁금합니다2. 깃 명령 내용을 홈화면에서 노출시키고 싶은데 어떻게해야하나요? ` Build Date: ${new Date().toLocaleString()} Commit Version: ${childProcess.execSync('git rev-parse --short HEAD')} Author: ${childProcess.execSync('git config user.name')}` 이 내용을 홈화면에 노출하고싶은데 혹시 보통 어떻게 처리하시는지 궁금합니다(js파일에서 const childProcess = require('child_process'); 이렇게 가져오면 child_prcoesschild_process is not defined 에러가 나고 서치한 방법으로는 제대로 해결한걸 못찾아서 질문드립니다)
- 해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
질문있습니다
안녕하세요, 강의듣는중 궁금한것이 있어서 질문드립니다. 1) 프롬프트상 바벨로 에러없이 변환 성공했을때, 항상 구버전 브라우저(IE11등)에서 동작하는것을 보장해주나요? ( 휴먼 코드 에러같은 것을 제외하고 ) 2) 1)번과 동일선상에 질문입니다. JQuery, Vue, React의 라이브러리(Component)들을 사용하다보면, 버전업 되면서 점점 "IE11는 더이상 지원 안함"이라고 되어있더라고요, 이런것도 바벨을 돌려서 IE11에서 돌아가게 할 수 있나요??
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
강의 자료 다운로드
강의 자료는 어떻게 다운 받을 수 있나요? 강의에 있는 ppt 자료 다운 문의 드려요
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
콘솔찍은건 잘 뜨는데 콘솔이 알랏으로 변경되지 않습니다
module.exports = function myWebpackLoader (content){ console.log("실행"); return content.replace('console.log(','alert('); } 으로 빌드하면 실행 콘솔 찍은것 2번 나오고 [webpack-cli] Compilation finished뜹니다 npx lite-server로 서버 구동하여 확인하면 알랏이 안뜨고 콘솔로 3이 뜹니다 일부러 module.exports = function myWebpackLoader (content){ console.log("실행"); return content.replace('console','alert('); } 이런식으로 콘솔글자를 바꿔서 빌드하면 You may need an additional loader to handle the result of these loaders. | import * as math from './math.js'; > alert(.log(math.sum(1,2)); 라는 에러가 뜹니다 replace가 동작을 하는것 같긴 한데 왜 콘솔을 알랏으로 바꾸지 못하는것일까요?
- 해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
npx babel app.js --plugins './my-babel-plugin.js/ 에러
버전이 안맞아서 그런지 처음 환경설정이 잘못된건지 강의 하나하나 에러의 연속이네요. babel/cli "^7.12.8"babel/core "^7.12.8" 왜 에러가 나는지 검색해도 안나오고 참 힘드네요. 보시고 해결법을 아시면 답변 부탁드립니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
build 할 경우 dist 경로가 중첩됩니다.
현재 엔트리와 아웃풋 강의를 보고 있는데요. dist를 하면 dist/main.js 로 파일이 나오지 않고, dist/main.js/main.js 로 나오고 있습니다. 작성한 webpack.config.js 파일은 이렇게 셋팅이 되어있구요. const path = require('path'); module.exports = { mode: 'development', entry: { main: "./src/app.js" }, output: { filename: "[name].js", path: path.resolve("./dist") } } package.json파일은 아래와 같이 작성 하였습니다. { "main": "index.js", "dependencies": { "webpack": "^5.6.0" }, "devDependencies": { "webpack-cli": "^4.2.0" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, } 터미널에서는 아래와 같은 에러가 나옵니다! [webpack-cli] [Error: EISDIR: illegal operation on a directory, open /Users/Desktop/project/dist/main.js] { errno: -21, code: 'EISDIR', syscall: 'open', path: '/Users/Desktop/project/dist/main.js' }
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
webpack-dev-server 에러 질문입니다.
npm start 하면 위 내용 처럼 에러가 발생합니다. 해결 방법이 있을까요?
- 해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
miniCssExtractPlugin이 동작하지 않습니다.
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): Error: Automatic publicPath is not supported in this browser 계속 위와 같은 에러가 뜨는데 어떻게 해야할까요? ./node_modules/mini-css-extract-plugin/dist/loader.js 경로에 파일은 정상적으로 있고package.json에도 mini-css-extract-plugin이 설치되어 버전명도 적혀있습니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
사용자 커스터마이징 프리티어 이용
extends: ['plugin:prettier/recommended'] 설정으로 프리티어 이용하려고 하는데요, 사용하다보니 원치 않는 부분까지 검사를 해서 불편해서 제가 원하는 기능만 프리티어 검사가 되도록 하고싶습니다. 예를 들어서 { "singleQuote": true, "semi": true } 딱 이정도만 쓰고 나머지는 검사하고 싶지 않은데요, 그럴때는 어떻게 .eslintrc.js에 세팅해주어야 하나요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
빌드결과
app.js에서 딱히 다이나믹 임포트는 하고 있지 않고, webpack.config.js에서 splitChunks는 사용중입니다. axios는 copy-webpack-plug으로 복사해주고 빌드했을 때 저는 강사님과 다르게 vendor파일이 있는데요, 적은 용량도 아니어서, 어떤이유로 벤더파일이 생길 가능성이 있는지 궁금합니다!
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
terser-webpack-plugin 타입 에러
terser-webpack-plugin사용시에 타입에러가 나서 해결방법 남겨둡니다. 에러메세지>> TypeError: Cannot read property 'javascript' of undefined 해결>> package.json에서 terser-webpack-plugin버전을 5점대에서 ^4.2.3 로 바꿈 참고 메세지>> Hi you are using Webpack 4 and Terser ^5.0.0. This version of Terser is for Webpack 5, you need to set version "terser-webpack-plugin": "^4.2.3", in package.json file (출처: https://github.com/webpack-contrib/terser-webpack-plugin/issues/335)
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
npm start 명령어 질문
build 명령어는 run을 붙이는데 start에는 run이 붙지 않는 이유가 무엇인지 혹시 알수있을까요??
- 해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
해당 에러는 해결을 어떻게 해야할까요?
css-loader와 style-loader를 install 하려는데 8 vulnerabilities (4 low, 1 moderate, 3 high) 라는 글자와 함께 npm audit fix 하래서 했는데 아래 에러가 추가로 남더라고요.무시하고서 진행하려고 했는데 계속 저 에러 뜨면서 모듈에는 install도 안되고 이거 해결하는게 앞에 정답확인부분에 있나 슬쩍봤는데 아무 일없이 install 하셔서 조금 특수한 케이스인 것 같아 질문드립니다.추가로 혹시해서 git clone 새로해서 해봤는데 똑같은 에러가 발생했습니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
pre-commit시에 npm은 안붙여줘도 되는건가요?
그 이유는 무엇인가요?