69,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
webpack.config.js 이 없는 프로젝트
안녕하세요 강사님 강의 정말 잘듣고있습니다 너무 유익해요 :)) 궁금한 점이 있는데, webpack.config.js 에서 기본적으로 mode, entry, output 을 설정해주신다고 하셨습니다. 그런데 cra 로 생성한 프로젝트를 보면 webpack.config.js 파일이 따로 ㅇ존재하지 않더라구요, 이런 경우엔 webpack.config.js 밖의 다른 곳에서 webpack 에 대한 설정을 해주는 것인가요?.?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
.eslintrc.js 파일 적용안됨
기초인데 달리 물어볼 사람이 없어서 여기 물어봅니다 ㅠㅠ 현재 협업 중인데 각 프로젝트마다 .eslintrc.js 파일이 있습니다. 그런데 제 vscode가 그걸 인식안하고 제 개인설정?을 더 우선시하더라구요. 이런경우는 어떻게 해야할까요? 저의 vsCode의 USER/settings.json 입니다 { "workbench.colorTheme": "Material Theme Darker High Contrast", "explorer.confirmDelete": false, "workbench.iconTheme": "material-icon-theme", "prettier.printWidth": 100, "prettier.jsxSingleQuote": true, "workbench.tree.indent": 2, "editor.defaultFormatter": "hex-ci.stylelint-plus", "prettier.singleQuote": true, "javascript.preferences.quoteStyle": "single", "typescript.preferences.quoteStyle": "single", "redhat.telemetry.enabled": false, "typescript.updateImportsOnFileMove.enabled": "always", "explorer.confirmDragAndDrop": false, "stylelint.autoFixOnSave": true, "javascript.updateImportsOnFileMove.enabled": "always", "eslint.run": "onSave", "git.enableSmartCommit": true, "git.confirmSync": false, "prettier.arrowParens": "avoid", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.alwaysShowStatus": true, "files.autoSave": "onFocusChange", "workbench.editor.untitled.hint": "hidden", "editor.formatOnPaste": true, "liveServer.settings.donotShowInfoMsg": true, "eslint.codeAction.showDocumentation": { "enable": true }, "editor.formatOnSave": true, "eslint.codeAction.disableRuleComment": { "location": "sameLine" }, "eslint.format.enable": true, "eslint.debug": true, "eslint.validate": [ ], "timeline.excludeSources": [], "window.zoomLevel": 3 }
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
lint-staged 가 작동하지 않는 이슈
영상 4분53초에 커밋을할때 lint-staged 가 작동해서, eslint 가 실행되어야 하는데, 실행이 되지 않습니다. pre-commit 에서 eslint src/app.js --fix 하면 잘되는데, lint-staged 패키지 버전을 다운그레이드 설치해서 해봐도 실행되지 않습니다. https://github.com/bohaesoju/webpack4 깃허브 주소 남깁니다.
- 해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
proxy 설정시
안녕하세요 proxy 동작에 대해 궁금해서 질문드립니다. 원래는 8080 -> 8081로 요청해서 CORS 에러가 나지만 위와같이 설정하게 되면 요청은 프록시 서버로 가고 프록시 서버가 8081로 위장해서 서버로부터 데이터를 받아와서 웹팩 데브 서버에게 전달해주는 구조인건가요??
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
npm run build 오류 납니다.
정말 아무리 찾아도 왜 에러 발생하는 지 모르겠습니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
React
React에서 App.js에서 루트를 화면에 렌더싱 시킬 때 (react-app)인 경우 아래와 같이 보통 써주었습니다. ReactDOM.render(<Root />, document.getElementById("root")); 여기서 궁금한것이 React에서는 Webpack을 내부적으로 알아서 번들링해서 화면에 뿌려주는것인지 아니면 Webpack 이용하지 않고 처리해주는것인지 궁금합니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
vscode 자동실행?
영상에서는 code . 을 타이핑하고 엔터를 입력하셨을때, VSCode 에디터가 자동실행 되었는데요. 저는 zsh: command not found: code 라고 code 라는 명령어가 없다고 나오네요. 어떻게 하신거예요??
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
현재 css 안에 사용된 이미지는 base64 로 인코딩이 안됩니다
현재 css 안에 사용된 이미지는 base64 로 인코딩이 안됩니다... 이유를 모르겠습니다 [package] "devDependencies": { "webpack": "5.47.1", "webpack-cli": "4.7.2", "css-loader": "6.2.0", "file-loader": "6.2.0", "style-loader": "3.2.1", "url-loader": "4.1.1" }, [webpack] module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'], }, { test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-loader', options: { name: '[name].[ext]?[hash]', publicPath: './dist', limit: 100000, }, }, ], }, ],
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
강의 내용 따라오시다가 css-loader 에서 빌드시에 에러 뜨시는분들
에러 문구를 자세히 보시게 되면 웹팩 버전 5점대 미만에서는 작동을 하지 않는다고 하니 package.json 파일의 webpack 버전을 5점대로 바꿔준뒤에 npm install 로 설치해준뒤 다시 빌드해보시길 바랍니다 강사님은 4점대로 진행하라하셨는데 우선 에러를 해결하고 내용을 진행하고 싶으신 분들을 이렇게 진행하세용
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
file-loader를 이용한 백그라운드 이미지 불러오기 관련 질문 드립니다
안녕하세요 수업 내용대로 file-loader를 이용하여 백그라운드 이미지를 불러오는 실습을 진행하다가 에러가 발생하여 질문 드립니다. 강의에서는 file-loader를 사용하지 않고 .css 파일에서 style-loader와 css-loader만 사용하고 빌드했을 경우에는 에러가 나야하는데 저는 에러가 나지 않고 브라우저에서 열어 봤을 때에 바로 백그라운드 이미지가 나옵니다. 또한 file-loader가 포함된 코드를 webpack.config.js에 추가했을때에는 빌드는 잘 되는데 오히려 브라우저에서 백그라운드 이미지가 나오지 않습니다. style-loader와 css-loader에서 file-loader의 역할을 대신해주도록 업데이트가 된걸까요..? 아래에 패키지 버전과 코드를 남겨드립니다. 패키지 버전 "dependencies": { "css-loader": "^6.2.0", "file-loader": "^6.2.0", "style-loader": "^3.2.1" } } app.js import * as math from './math.js' import './app.css' console.log(math.sum(1,2)); app.css body { background-image: url(bg.png); } webpack.config.js (백그라운드 이미지 뜨는 경우) const path = require('path'); 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' ] }, ] } } webpack.config.js (백그라운드 이미지 뜨지 않는 경우) const path = require('path'); 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$/, // .png 확장자로 마치는 모든 파일 loader: "file-loader", options: { publicPath: "./dist/", // prefix를 아웃풋 경로로 지정 name: "[name].[ext]?[hash]", // 파일명 형식 }, }, ] } } 아래와 같은 코드에서 빌드했을 때에 dist/main.js 코드 입니다. /* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). * This devtool is neither made for production nor for readable output files. * It uses "eval()" calls to create a separate source file in the browser devtools. * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) * or disable the default devtool with "devtool: false". * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). */ /******/ (() => { // webpackBootstrap /******/ "use strict"; /******/ var __webpack_modules__ = ({ /***/ "./node_modules/css-loader/dist/cjs.js!./src/app.css": /*!***********************************************************!*\ !*** ./node_modules/css-loader/dist/cjs.js!./src/app.css ***! \***********************************************************/ /***/ ((module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/getUrl.js */ \"./node_modules/css-loader/dist/runtime/getUrl.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(/* asset import */ __webpack_require__(/*! bg.png */ \"./src/bg.png\"), __webpack_require__.b);\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1___default()(___CSS_LOADER_URL_IMPORT_0___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"body {\\n background-image: url(\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \");\\n}\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://npm-sample/./src/app.css?./node_modules/css-loader/dist/cjs.js"); /***/ }), /***/ "./node_modules/css-loader/dist/runtime/api.js": /*!*****************************************************!*\ !*** ./node_modules/css-loader/dist/runtime/api.js ***! \*****************************************************/ /***/ ((module) => { eval("\n\n/*\n MIT License http://www.opensource.org/licenses/mit-license.php\n Author Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\n// eslint-disable-next-line func-names\nmodule.exports = function (cssWithMappingToString) {\n var list = []; // return the list of modules as css string\n\n list.toString = function toString() {\n return this.map(function (item) {\n var content = cssWithMappingToString(item);\n\n if (item[2]) {\n return \"@media \".concat(item[2], \" {\").concat(content, \"}\");\n }\n\n return content;\n }).join(\"\");\n }; // import a list of modules into the list\n // eslint-disable-next-line func-names\n\n\n list.i = function (modules, mediaQuery, dedupe) {\n if (typeof modules === \"string\") {\n // eslint-disable-next-line no-param-reassign\n modules = [[null, modules, \"\"]];\n }\n\n var alreadyImportedModules = {};\n\n if (dedupe) {\n for (var i = 0; i < this.length; i++) {\n // eslint-disable-next-line prefer-destructuring\n var id = this[i][0];\n\n if (id != null) {\n alreadyImportedModules[id] = true;\n }\n }\n }\n\n for (var _i = 0; _i < modules.length; _i++) {\n var item = [].concat(modules[_i]);\n\n if (dedupe && alreadyImportedModules[item[0]]) {\n // eslint-disable-next-line no-continue\n continue;\n }\n\n if (mediaQuery) {\n if (!item[2]) {\n item[2] = mediaQuery;\n } else {\n item[2] = \"\".concat(mediaQuery, \" and \").concat(item[2]);\n }\n }\n\n list.push(item);\n }\n };\n\n return list;\n};\n\n//# sourceURL=webpack://npm-sample/./node_modules/css-loader/dist/runtime/api.js?"); /***/ }), /***/ "./node_modules/css-loader/dist/runtime/getUrl.js": /*!********************************************************!*\ !*** ./node_modules/css-loader/dist/runtime/getUrl.js ***! \********************************************************/ /***/ ((module) => { eval("\n\nmodule.exports = function (url, options) {\n if (!options) {\n // eslint-disable-next-line no-param-reassign\n options = {};\n }\n\n if (!url) {\n return url;\n } // eslint-disable-next-line no-underscore-dangle, no-param-reassign\n\n\n url = String(url.__esModule ? url.default : url); // If url is already wrapped in quotes, remove them\n\n if (/^['\"].*['\"]$/.test(url)) {\n // eslint-disable-next-line no-param-reassign\n url = url.slice(1, -1);\n }\n\n if (options.hash) {\n // eslint-disable-next-line no-param-reassign\n url += options.hash;\n } // Should url be wrapped?\n // See https://drafts.csswg.org/css-values-3/#urls\n\n\n if (/[\"'() \\t\\n]|(%20)/.test(url) || options.needQuotes) {\n return \"\\\"\".concat(url.replace(/\"/g, '\\\\\"').replace(/\\n/g, \"\\\\n\"), \"\\\"\");\n }\n\n return url;\n};\n\n//# sourceURL=webpack://npm-sample/./node_modules/css-loader/dist/runtime/getUrl.js?"); /***/ }), /***/ "./src/bg.png": /*!********************!*\ !*** ./src/bg.png ***! \********************/ /***/ ((module, __unused_webpack_exports, __webpack_require__) => { eval("module.exports = __webpack_require__.p + \"3d9f2814733b516c33db.png\";\n\n//# sourceURL=webpack://npm-sample/./src/bg.png?"); /***/ }), /***/ "./src/app.css": /*!*********************!*\ !*** ./src/app.css ***! \*********************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"./node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"./node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"./node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"./node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_app_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../node_modules/css-loader/dist/cjs.js!./app.css */ \"./node_modules/css-loader/dist/cjs.js!./src/app.css\");\n\n \n \n \n \n \n \n \n \n \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\n\n options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\n \noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_app_css__WEBPACK_IMPORTED_MODULE_6__.default, options);\n\n\n\n\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_app_css__WEBPACK_IMPORTED_MODULE_6__.default && _node_modules_css_loader_dist_cjs_js_app_css__WEBPACK_IMPORTED_MODULE_6__.default.locals ? _node_modules_css_loader_dist_cjs_js_app_css__WEBPACK_IMPORTED_MODULE_6__.default.locals : undefined);\n\n\n//# sourceURL=webpack://npm-sample/./src/app.css?"); /***/ }), /***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js": /*!****************************************************************************!*\ !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***! \****************************************************************************/ /***/ ((module) => { eval("\n\nvar stylesInDom = [];\n\nfunction getIndexByIdentifier(identifier) {\n var result = -1;\n\n for (var i = 0; i < stylesInDom.length; i++) {\n if (stylesInDom[i].identifier === identifier) {\n result = i;\n break;\n }\n }\n\n return result;\n}\n\nfunction modulesToDom(list, options) {\n var idCountMap = {};\n var identifiers = [];\n\n for (var i = 0; i < list.length; i++) {\n var item = list[i];\n var id = options.base ? item[0] + options.base : item[0];\n var count = idCountMap[id] || 0;\n var identifier = \"\".concat(id, \" \").concat(count);\n idCountMap[id] = count + 1;\n var index = getIndexByIdentifier(identifier);\n var obj = {\n css: item[1],\n media: item[2],\n sourceMap: item[3]\n };\n\n if (index !== -1) {\n stylesInDom[index].references++;\n stylesInDom[index].updater(obj);\n } else {\n stylesInDom.push({\n identifier: identifier,\n updater: addStyle(obj, options),\n references: 1\n });\n }\n\n identifiers.push(identifier);\n }\n\n return identifiers;\n}\n\nfunction addStyle(obj, options) {\n var api = options.domAPI(options);\n api.update(obj);\n return function updateStyle(newObj) {\n if (newObj) {\n if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) {\n return;\n }\n\n api.update(obj = newObj);\n } else {\n api.remove();\n }\n };\n}\n\nmodule.exports = function (list, options) {\n options = options || {};\n list = list || [];\n var lastIdentifiers = modulesToDom(list, options);\n return function update(newList) {\n newList = newList || [];\n\n for (var i = 0; i < lastIdentifiers.length; i++) {\n var identifier = lastIdentifiers[i];\n var index = getIndexByIdentifier(identifier);\n stylesInDom[index].references--;\n }\n\n var newLastIdentifiers = modulesToDom(newList, options);\n\n for (var _i = 0; _i < lastIdentifiers.length; _i++) {\n var _identifier = lastIdentifiers[_i];\n\n var _index = getIndexByIdentifier(_identifier);\n\n if (stylesInDom[_index].references === 0) {\n stylesInDom[_index].updater();\n\n stylesInDom.splice(_index, 1);\n }\n }\n\n lastIdentifiers = newLastIdentifiers;\n };\n};\n\n//# sourceURL=webpack://npm-sample/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?"); /***/ }), /***/ "./node_modules/style-loader/dist/runtime/insertBySelector.js": /*!********************************************************************!*\ !*** ./node_modules/style-loader/dist/runtime/insertBySelector.js ***! \********************************************************************/ /***/ ((module) => { eval("\n\nvar memo = {};\n/* istanbul ignore next */\n\nfunction getTarget(target) {\n if (typeof memo[target] === \"undefined\") {\n var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself\n\n if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n try {\n // This will throw an exception if access to iframe is blocked\n // due to cross-origin restrictions\n styleTarget = styleTarget.contentDocument.head;\n } catch (e) {\n // istanbul ignore next\n styleTarget = null;\n }\n }\n\n memo[target] = styleTarget;\n }\n\n return memo[target];\n}\n/* istanbul ignore next */\n\n\nfunction insertBySelector(insert, style) {\n var target = getTarget(insert);\n\n if (!target) {\n throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.\");\n }\n\n target.appendChild(style);\n}\n\nmodule.exports = insertBySelector;\n\n//# sourceURL=webpack://npm-sample/./node_modules/style-loader/dist/runtime/insertBySelector.js?"); /***/ }), /***/ "./node_modules/style-loader/dist/runtime/insertStyleElement.js": /*!**********************************************************************!*\ !*** ./node_modules/style-loader/dist/runtime/insertStyleElement.js ***! \**********************************************************************/ /***/ ((module) => { eval("\n\n/* istanbul ignore next */\nfunction insertStyleElement(options) {\n var style = document.createElement(\"style\");\n options.setAttributes(style, options.attributes);\n options.insert(style);\n return style;\n}\n\nmodule.exports = insertStyleElement;\n\n//# sourceURL=webpack://npm-sample/./node_modules/style-loader/dist/runtime/insertStyleElement.js?"); /***/ }), /***/ "./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js": /*!**********************************************************************************!*\ !*** ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js ***! \**********************************************************************************/ /***/ ((module, __unused_webpack_exports, __webpack_require__) => { eval("\n\n/* istanbul ignore next */\nfunction setAttributesWithoutAttributes(style) {\n var nonce = true ? __webpack_require__.nc : 0;\n\n if (nonce) {\n style.setAttribute(\"nonce\", nonce);\n }\n}\n\nmodule.exports = setAttributesWithoutAttributes;\n\n//# sourceURL=webpack://npm-sample/./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js?"); /***/ }), /***/ "./node_modules/style-loader/dist/runtime/styleDomAPI.js": /*!***************************************************************!*\ !*** ./node_modules/style-loader/dist/runtime/styleDomAPI.js ***! \***************************************************************/ /***/ ((module) => { eval("\n\n/* istanbul ignore next */\nfunction apply(style, options, obj) {\n var css = obj.css;\n var media = obj.media;\n var sourceMap = obj.sourceMap;\n\n if (media) {\n style.setAttribute(\"media\", media);\n } else {\n style.removeAttribute(\"media\");\n }\n\n if (sourceMap && typeof btoa !== \"undefined\") {\n css += \"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), \" */\");\n } // For old IE\n\n /* istanbul ignore if */\n\n\n options.styleTagTransform(css, style);\n}\n\nfunction removeStyleElement(style) {\n // istanbul ignore if\n if (style.parentNode === null) {\n return false;\n }\n\n style.parentNode.removeChild(style);\n}\n/* istanbul ignore next */\n\n\nfunction domAPI(options) {\n var style = options.insertStyleElement(options);\n return {\n update: function update(obj) {\n apply(style, options, obj);\n },\n remove: function remove() {\n removeStyleElement(style);\n }\n };\n}\n\nmodule.exports = domAPI;\n\n//# sourceURL=webpack://npm-sample/./node_modules/style-loader/dist/runtime/styleDomAPI.js?"); /***/ }), /***/ "./node_modules/style-loader/dist/runtime/styleTagTransform.js": /*!*********************************************************************!*\ !*** ./node_modules/style-loader/dist/runtime/styleTagTransform.js ***! \*********************************************************************/ /***/ ((module) => { eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, style) {\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n while (style.firstChild) {\n style.removeChild(style.firstChild);\n }\n\n style.appendChild(document.createTextNode(css));\n }\n}\n\nmodule.exports = styleTagTransform;\n\n//# sourceURL=webpack://npm-sample/./node_modules/style-loader/dist/runtime/styleTagTransform.js?"); /***/ }), /***/ "./src/app.js": /*!********************!*\ !*** ./src/app.js ***! \********************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _math_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./math.js */ \"./src/math.js\");\n/* harmony import */ var _app_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./app.css */ \"./src/app.css\");\n\n\n\nconsole.log(_math_js__WEBPACK_IMPORTED_MODULE_0__.sum(1,2));\n\n//# sourceURL=webpack://npm-sample/./src/app.js?"); /***/ }), /***/ "./src/math.js": /*!*********************!*\ !*** ./src/math.js ***! \*********************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"sum\": () => (/* binding */ sum)\n/* harmony export */ });\nfunction sum(a,b) {\n return a+b;\n}\n\n//# sourceURL=webpack://npm-sample/./src/math.js?"); /***/ }) /******/ }); /************************************************************************/ /******/ // The module cache /******/ var __webpack_module_cache__ = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ var cachedModule = __webpack_module_cache__[moduleId]; /******/ if (cachedModule !== undefined) { /******/ return cachedModule.exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = __webpack_module_cache__[moduleId] = { /******/ id: moduleId, /******/ // no module.loaded needed /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = __webpack_modules__; /******/ /************************************************************************/ /******/ /* webpack/runtime/compat get default export */ /******/ (() => { /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = (module) => { /******/ var getter = module && module.__esModule ? /******/ () => (module['default']) : /******/ () => (module); /******/ __webpack_require__.d(getter, { a: getter }); /******/ return getter; /******/ }; /******/ })(); /******/ /******/ /* webpack/runtime/define property getters */ /******/ (() => { /******/ // define getter functions for harmony exports /******/ __webpack_require__.d = (exports, definition) => { /******/ for(var key in definition) { /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); /******/ } /******/ } /******/ }; /******/ })(); /******/ /******/ /* webpack/runtime/global */ /******/ (() => { /******/ __webpack_require__.g = (function() { /******/ if (typeof globalThis === 'object') return globalThis; /******/ try { /******/ return this || new Function('return this')(); /******/ } catch (e) { /******/ if (typeof window === 'object') return window; /******/ } /******/ })(); /******/ })(); /******/ /******/ /* webpack/runtime/hasOwnProperty shorthand */ /******/ (() => { /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) /******/ })(); /******/ /******/ /* webpack/runtime/make namespace object */ /******/ (() => { /******/ // define __esModule on exports /******/ __webpack_require__.r = (exports) => { /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); /******/ } /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ })(); /******/ /******/ /* webpack/runtime/publicPath */ /******/ (() => { /******/ var scriptUrl; /******/ if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + ""; /******/ var document = __webpack_require__.g.document; /******/ if (!scriptUrl && document) { /******/ if (document.currentScript) /******/ scriptUrl = document.currentScript.src /******/ if (!scriptUrl) { /******/ var scripts = document.getElementsByTagName("script"); /******/ if(scripts.length) scriptUrl = scripts[scripts.length - 1].src /******/ } /******/ } /******/ // When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration /******/ // or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic. /******/ if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser"); /******/ scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/"); /******/ __webpack_require__.p = scriptUrl; /******/ })(); /******/ /******/ /* webpack/runtime/jsonp chunk loading */ /******/ (() => { /******/ __webpack_require__.b = document.baseURI || self.location.href; /******/ /******/ // object to store loaded and loading chunks /******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched /******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded /******/ var installedChunks = { /******/ "main": 0 /******/ }; /******/ /******/ // no chunk on demand loading /******/ /******/ // no prefetching /******/ /******/ // no preloaded /******/ /******/ // no HMR /******/ /******/ // no HMR manifest /******/ /******/ // no on chunks loaded /******/ /******/ // no jsonp function /******/ })(); /******/ /************************************************************************/ /******/ /******/ // startup /******/ // Load entry module and return exports /******/ // This entry module can't be inlined because the eval devtool is used. /******/ var __webpack_exports__ = __webpack_require__("./src/app.js"); /******/ /******/ })() ;
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
package.json에 prettier관련 스크립트 추가 관련
안녕하세요 여쭤볼 것이 있습니다. 저는 double quote보다는 single quote를 선호해서 eslint.js rules에 { rules: { 'prettier/prettier': [ 'error', { singleQuote: true, }, ], }, } 이렇게 추가하였는데요! package.json에 이렇게 또 prettier 스크립트를 추가해줘야 될까요? eslint에 이미 prettier를 통합해줬기 때문에 필요없을까요? "prettier": { "singleQuote": true },
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
TypeError: this.getOptions is not a function 에러
안녕하세요 실습 문제 풀이중에 이와 같은 에러가 발생하여 질문 드립니다. 조금 찾아보니 sass-loader 사용시 나타나는 오류라는 말만 있어서 혼란스럽습니다. config 파일은 수업 진행 그대로 해봤는데도 여전히 동일한 에러가 출력됩니다. npm 6.14.12 node 14.16.1 이 외 로더 버전은 다음과 같습니다
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
문득 궁금해서 질문 드립니다.
스코프 관련해서는 항상 당연한듯 IIFE 로 하다가 생각해 보니 일반 코드 블럭으로 해도 되는거 아닌가? 하는 생각이 들어서 질문드립니다. 두 방식 모두 2:45에서 처럼 결과가 콘솔창에 잘 나오고 각 sum 함수만 접근 가능한 num 변수를 선언할 수도 있는데 (스코프 개념) IIFE 를 사용하신 이유가 있나요??
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
TypeError: Invalid value used in weak set
구글링해봐도 어떤문제인지 모르겠어서 질문드립니다. 오류내용, packge.json, webpack.config.js 소스 이미지 첨부합니다. 강의내용과 똑같이 하였는데 왜그런지 모르겠네요 webpack4 입니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
babel-loader 설정
babel.config.js 파일없이 webpack.config.js파일에 옵션값으로 넣어서 빌드 후 Promise나 async를 검색하면 검색이 안되는 거 같은데...요게 정확히 동작한건지 궁금합니다.
- 해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
DefinePlugin
DefinePlugin의 경우환경 의존적인 정보를 (ex-환경에따라 API주소가 다르다거나) 소스가 아닌곳에서 관리하기 위함이라고 하셨는데, new webpack.DefinePlugin({ VERSION: JSON.stringify("v.1.2.3"), PRODUCTION: JSON.stringify(false), MAX_COUNT: JSON.stringify(999), "api.domain": JSON.stringify("http://dev.api.domain.com"), // }) 그렇다면 api.domain : JSON.stringify("http://dev.api.domain.com"), 이부분을 api.domain : process.env.NODE_ENV == 'production' ? JSON.stringify("http://pro.api.domain.com") : JSON.stringify("http://dev.api.domain.com") 이런식으로 사용가능해야 배포할때마다 코드수정 줄일수 있지않나요? (어떤식으로 효율이 날수있게 사용하는지 잘모르겠달까요..) 그리고 webpack config 같은경우는 git에 올라가서 공개될지 모르는데 .env로 관리하는게 보안적으로 더 안전하지 않나요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
webpack으로 번들링 후 브라우저에서 에러가 나요
번들링은 잘 된거같은데 브라우저에서 첫화면과같은 에러가 나요 왜그런걸까요? r그리고 npm run build 실행하면 이렇게 에러가 나는데.. 오타는 없는거같거든요 ㅠㅠ 웹팩 버전 문제일까요? 버전 4를 붙여서 설치했었는데.. 혹시몰라서 코드 올린 깃헙 링크도 같이 첨부합니다. https://github.com/hailey21/sample
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
main
package json에서 main은 무엇일까요
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
강의 영상중 VSCode 케럿 [추가 + 속성 포커싱 ] 단축키 질문
항상 핵심을 꿰뚫는 강의 참 감사하게 시청하고 있어요.늘 감사합니다.영상 시청중에 눈이 동그래져 버렸습니다.😍 1. 이렇게, 순식간에 동일한 속성 마다에 케럿 을 늘려 포커싱 해주는 단축키가 궁금합니다. 2. 이건 VSCode 에만 있는 단축키 인가요?(인텔리제이는 highlight 된 변수,속성 명 1개에만 해당하는 것 같습니다 반면 영상으로 확인한 바는, id, name 둘다 포커싱이 되는 것으로 보여, 참으로 신기했습니다) 읽어주셔서 감사합니다
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
혹시 js가 너무 많아져도 webpack으로 하나로 다 뽑아내나요??
js나 css가 이 페이지에서는 전혀 부를 필요가 없는 애인데 전체를 다 번들해서 불러오는 게 일반적인가요? 엔트리 하나 더 만들고 아웃풋2 만들어서 쓰나 했는데 htmlWebpackPlug을 보면... 그냥 번들한 거 죄다 불러오는 거 같아서 이러면 성능상에 문제가 생기거나 하지 않을지 걱정됩니다