69,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
eslint에 대해 질문 있습니다 !
안녕하세요! eslint를 설치하고 세팅한 뒤로 부터 새로운 프로젝트를 만들때면 그 프로젝트에도 전부 eslint가 적용되어 커맨드 창에 오류 문구들이 뜨는데 이걸 제어해주는 방법은 없을까요 ??
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
이 에러는 뭘까요...
my-webpack-loader.js 하니까 이렇게 에러가 뜨네요 ㅠ
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
이미지크기 확인법 질문입니다.
안녕하세요. 터미널창에서 ll src 를 입력해서 이미지크기 확인을 하셨는데, 저는 ll src 입력하니 command not found 라는 메시지만 뜹니다. 어떻게 해결해야 되나요 ?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
no-unexpected-multiline 이슈
프리티어를 ESLint와 통합하고, 실행하면 강의 초반에 예를 들었던 console.log( ) ( function( ) { } ) ( ) 코드의 Error가 표시되지 않습니다. 저는 셋팅이 잘못된 줄 알고 한참을 헤매다가, 결국 프리티어를 통합시키면, 이 멀티라인 에러가 무시된다는것을 알았습니다. https://github.com/prettier/eslint-config-prettier/issues/30 저 같은 경우 Prettier는 vscode extension으로 사용해오고 있었는데, 그래서 이럴 경우 꼭 웹팩에서 eslint와 통합시킬 필요가 있는지 궁금합니다. 그리고 실무에서는 prettier를 웹팩에다 설치하는지 아니면 저같이 extension으로 사용하는지 궁금합니다. 감사합니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
안녕하세요 질문있습니다.
안녕하세요. 4분 21분에 있는 webpack으로 output시키는거 해보는데 이런 문제가 발생합니다. 어떻게 해결해야 되나요 ? ㅜㅜ
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
npm run build 에러 궁금합니다!
실습 중 math.js 를 모듈로 만들어 import받는 과제중인데요 { "name": "sample2", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack" }, "author": "", "license": "ISC", "dependencies": { "babel": "^6.23.0", "dotenv": "^8.2.0", "react": "^17.0.1" }, "devDependencies": { "webpack": "^5.24.4", "webpack-cli": "^4.5.0" }, "type": "module" } type module 을 추가하니 webpack.config.js에서 ReferenceError: module is not defined 에러가 납니다. 문제를 해결하고 싶네요 ㅠㅠ import path from 'path' module.exports = { mode: "development", entry: { main: "./src/app.js", }, output: { filename: "[name].js", path: path.resolve("./dist"), } }
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
김정환님 강의중 문의할 곳 이 없어 강의를 구입했던 곳에 문의 남깁니다.
테스트주도개발(TDD)로 만드는 NodeJS API 서버 이 강의를 보려고합니다. 다만 mocha로 테스트를 하셨던데 jest를 사용하고 있는 입장에서 해당 강의를 봐도 무방한가요?
- 해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
proxy가 잘 이해 되지 않는데요...
결국 proxy는 자신의 url로 요청하고 그 요청이 있으면 저 주소로 보내서 가져와서 자신의 url에 있는 것 처럼 보이게 하는 것 이라는건가요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
husky도 버전이 변경되었나 봐요..
버전 5가 되면서 package.json 파일에서 입력하는게 아니고 npx husky add .husky/pre-commit "npx eslint app.js --fix" 이런식으로 생성해서 하는 것으로 바뀐것 같네요. (여기서는 npx를 안넣어주면 실행이 안되네요...) 아니면 package.json에서 하는 방법이 있는데 제가 못찾은 것 일수도 있구용... ps. npm install husky@4 로 설치하면 기존의 방식대로 할 수 있네요.. 문제는 lint-staged를 어떻게 쓰는지 모르겠네요...
- 해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
혹시 지금은 sass-loader 설치하는 방법이 다른가요?
예제를 보고 따라하고 있는데 의존성 문제로 sass-loader를 설치하지 못하고 있습니다.. 그냥 sass-loader를 설치하려고하면 webpack 5이상을 요구하고 sass-loader@4로 설치해도 문제는 없어보이는데도 설치하지 못하네요... 이 부분이 햇갈리는데... 문서를 찾아보면 또 node-sass를 설치하라는 말은 없네요... 해당부분이 sass로 되어있는데 이게 node-sass와 같은 것인가요?
- 해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
이해가 안가는 부분이 있습니다.
지금 실습하면서 본건데요. npm run build를 하면 ERROR in Entry module not found: Error: Can't resolve './src' in ~~ 에러가 나면서 빌드가 안되거든요. 그래서 인터넷에서 찾아본결과 app.js 말고 index.js 로 이름을 변경하면 된다길래 해보니 정말로 되더라구요. 근데 webpack.config.js에 entry는 ./src/app.js를 그대로 찾고 있거든요? 왜 이런 현상이 일어날까요? 웹팩은 무조건 index.js로 진입점을 설정해야 하는 건가요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
TypeError: Cannot read property 'tap' of undefined
const path = require('path');const webpack = require('webpack');const childProcess = require('child_process');const HtmlWebpackPlugin = require('html-webpack-plugin'); plugins: [ new webpack.BannerPlugin({ Build Date: ${new Date().toLocaleString()} Commit Version: ${childProcess.execSync('git rev-parse --short HEAD')} Author: ${childProcess.execSync('git config user.name')} ` }), new webpack.DefinePlugin({ TWO : JSON.stringify('1 + 1'), 'api.domain': JSON.stringify('http://dev.api.domain.com') }), new HtmlWebpackPlugin({ template: './src/index.html' })] DefinePlugin까지는 build가 잘됐는데 HtmlWebpackPlugin 작성 후 build하면 제목과 같은 오류가 발생합니다. 어떻게 해결해야할까요? HtmlWebpackPlugin이 써드 파티 패키지인게 관련이 있을까요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
webpack.config.js//npm run build 오류
이렇게 되는데 로그파일 에러 ? 이유를 모르겠네요....
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
이렇게 되는데.... 해결방법을 모르겠네요 구글링해두 ...뭐가문젠지 ㅠ
(사진)
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
웹팩을 설치할때 개발모드로 설치하는데 프로덕션이 필요한 이유는 무엇인가요?
웹팩을 -D 옵션을 줘서 개발모드에서만 사용할것처럼 설치를 했는데, 프로덕션 모드설정은 왜하는지 궁금합니다.
- 해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
TypeError: compiler.plugin is not a function
const path = require('path');const MyWebpackPlugin = require("./my-webpack-plugin");module.exports = { mode : 'development', entry: { main: './src/app.js' }, output: { path: path.resolve('./dist'), filename: '[name].js' }, module : { rules : [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(png|jpg|gif|svg)$/, loader: 'url-loader', options: { publicPath: './dist/', name: '[name].[ext]?[hash]', limit: 20000, } } ] }, plugins: [ new MyWebpackPlugin() ]} class MyWebpackPlugin { apply(compiler) { /*compiler.hooks.done.tap("My Plugin", stats => { console.log("MyPlugin: done") })*/ compiler.plugin('emit', (compilation, callback) => { const source = compilation.assets['main.js'].source(); compilation.assets['main.js'].source = () => { const banner = [ '/**', ' * 이것은 BannerPlugin이 처리한 결과입니다.', ' * Build Date: 2019-10-10', ' */' ].join('\n'); return banner + '\n' + source; } callback(); }) }}module.exports = MyWebpackPlugin; 플러그인 부분 따라서 공부하던 중 class myWebpackPlugin을 블로그 소스로 가져온 뒤에 npm run build를 돌렸는데여, [webpack-cli] TypeError: compiler.plugin is not a function 이런 에러가 발생했어여ㅠ_____ㅠ 왜 그러는걸까여?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
entry, output의 path 지정 방법
output의 경로를 설정할 때에는 path.resolve()를 사용하셨는데,entry에서는 사용하지 않으셔서 찾아보니output은 절대경로로 설정해야한다고 나오는거 같습니다. entry는 상대경로를 허용하는데 output은 안 되는 이유를 알 수 있을까요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
TypeError: __webpack_require__(...) is not a function에러
babel.config.js module.exports = { presets: [ ['@babel/preset-env', { targets: { ie: '11' }, useBuiltIns: 'usage', // 폴리필 corejs: { version: 2 // 3 } }] ] } webpack const path = require("path"); const webpack = require("webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); process.env.NODE_ENV = process.env.NODE_ENV || "development"; module.exports = { mode: "development", entry: { main: "./src/app.js" }, output: { filename: "[name].js", path: path.resolve("./dist") }, module: { rules: [ { test: /\.(scss|css)$/, use: [ process.env.NODE_ENV === "production" ? MiniCssExtractPlugin.loader // 프로덕션 환경 : "style-loader", // 개발 환경 "css-loader" ] }, { test: /\.(png|jpg|svg|gif)$/, loader: "url-loader", options: { name: "[name].[ext]?[hash]", limit: 10000 // 10Kb } }, { test: /\.js$/, loader: 'babel-loader', exclude: '/node_modules/' } ] }, plugins: [ new webpack.BannerPlugin({ banner: `빌드 날짜: ${new Date().toLocaleString()}` }), new HtmlWebpackPlugin({ template: "./src/index.html", templateParameters: { env: process.env.NODE_ENV === "development" ? "(개발용)" : "" }, minify: process.env.NODE_ENV === "production" ? { collapseWhitespace: true, // 빈칸 제거 removeComments: true // 주석 제거 } : false, hash: process.env.NODE_ENV === "production" }), new CleanWebpackPlugin(), ...(process.env.NODE_ENV === "production" ? [new MiniCssExtractPlugin({ filename: `[name].css` })] : []) ] }; package.json "devDependencies": { "babel-loader": "^8.2.2", "clean-webpack-plugin": "^3.0.0", "css-loader": "^3.4.1", "file-loader": "^5.0.2", "html-webpack-plugin": "^3.2.0", "mini-css-extract-plugin": "^0.9.0", "style-loader": "^1.1.2", "url-loader": "^3.0.0", "webpack": "^4.41.5", "webpack-cli": "^3.3.10" }, "dependencies": { "@babel/cli": "^7.12.10", "@babel/core": "^7.12.10", "@babel/preset-env": "^7.12.11", "core-js": "^2.6.12", "regenerator-runtime": "^0.13.7" } 에러로그 ERROR in Error: C:\Users\Administrator\Desktop\sumin\lecture-frontend-dev-env/node_modules/core-js/modules/_classof.js?:4 var TAG = __webpack_require__(/*! ./_wks */ "./node_modules/core-js/modules/_wks.js")('toStringTag'); // ES3 wrong her e ^ TypeError: __webpack_require__(...) is not a function - _classof.js?:4 eval [.]/[core-js]/modules/_classof.js?:4:86 - index.html:154 Object../node_modules/core-js/modules/_classof.js C:/Users/Administrator/Desktop/sumin/lecture-frontend-dev-env/src/index.html:154:1 - index.html:22 __webpack_require__ C:/Users/Administrator/Desktop/sumin/lecture-frontend-dev-env/src/index.html:22:30 - es6.object.to-string.js?:3 eval [.]/[core-js]/modules/es6.object.to-string.js?:3:15 - index.html:924 Object../node_modules/core-js/modules/es6.object.to-string.js C:/Users/Administrator/Desktop/sumin/lecture-frontend-dev-env/src/index.html:924:1 - index.html:22 __webpack_require__ C:/Users/Administrator/Desktop/sumin/lecture-frontend-dev-env/src/index.html:22:30 - _cof.js?:3 Module.eval [.]/[core-js]/modules/_cof.js?:3:97 - _cof.js?:12 eval [.]/[core-js]/modules/_cof.js?:12:30 - index.html:166 Module../node_modules/core-js/modules/_cof.js C:/Users/Administrator/Desktop/sumin/lecture-frontend-dev-env/src/index.html:166:1 - index.html:22 __webpack_require__ C:/Users/Administrator/Desktop/sumin/lecture-frontend-dev-env/src/index.html:22:30 Child html-webpack-plugin for "index.html": 1 asset Entrypoint undefined = index.html [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 1.04 KiB {0} [built] [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 1000 bytes {0} [built] [./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 631 bytes {0} [built] [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 552 bytes {0} [built] + 85 hidden modules npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! lecture-frontend-dev-env@1.0.0 build: `webpack --progress` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the lecture-frontend-dev-env@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2021-01-21T13_23_59_787Z-debug.log 구글링을 했는데도 뚜렷한 원인을 잘 모르겠습니다..ㅜㅜ
- 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
webpack 번들링 에러
삭제된 글입니다
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
publicPath 개념이 모호합니다..
기존 src 위의 html에서 호출했을땐 이미지 파일 호출경로가 위 처럼 나옵니다. 이건 제가 생각한 publicPath개념이 맞는데 도대체 html 파일을 dist에 넣었다고 왜 /dist/dist/ 가 되나요? 첫 이미지와 경로가 같아야하는게 아닌가요? 정말 이해가 안됩니다.