묻고 답해요
129만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
TypeError: ((process.env.NODE_ENV === "production") && [MiniCssExtractPlugin]) is not iterable
TypeError: ((process.env.NODE_ENV === "production") && [MiniCssExtractPlugin]) is not iterable문제 없어보이는데 계속 저 에러가 발생하네요npm run build 만 입력하면 production이 아니니까 타야할거같은데 환경변수를 집어넣어주면 에러가 발생안하고 안넣어주면 에러가 발생합니다. const path = require("path"); const webpack = require("webpack"); const childProcess = require("child_process"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const isProduction = process.env.NODE_ENV === "production"; module.exports = { mode: "development", entry: { mainSrc: "./app.js", }, output: { path: path.resolve("./dist"), filename: "[name].js", }, module: { rules: [ { test: /\.css$/, use: isProduction ? [MiniCssExtractPlugin.loader, "css-loader"] : ["style-loader", "css-loader"], }, { test: /\.(png|jpg|gif|svg)$/, type: "asset/resource", }, { test: /\.js$/, loader: "babel-loader", exclude: "/node_modules/", }, ], }, plugins: [ 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")} `, }), new webpack.DefinePlugin({ TWO: "1+1", TWO_STRING: JSON.stringify("1+1"), "api-domain": JSON.stringify("http://dev.api.domain.com"), }), new HtmlWebpackPlugin({ template: "./src/index.html", templateParameters: { env: process.env.NODE_ENV === "development" ? "개발용" : "운영", }, minify: process.env.NODE_ENV === "production" && { collapseWhitespace: true, removeComments: true, }, }), new CleanWebpackPlugin(), ...(process.env.NODE_ENV === "production" && [ new MiniCssExtractPlugin({ filename: "[name].css", }), ]), ], };
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
혹시 웹팩 5 내용으로 강의 업데이트는 안되는건가요?
혹시 웹팩 5 내용으로 강의 업데이트는 안되는건가요?
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
에러없이 png안뜨시는 분들
webpack-cli3, webpack4, loader는 @2로 install 하시면 강의와 같이 잘 나옵니다. 저는 참고로 모든 웹팩, 로더 버전 최신으로 깔았다가 png가 안나왔네요.
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
Error: Cannot find module 'node:crypto'
"devDependencies": { "eslint": "^8.56.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.1.2", "husky": "^8.0.3", "lint-staged": "^15.2.0", "prettier": "^3.1.1", "webpack": "^4.41.5", "webpack-cli": "^3.3.10" },일때module.exports = { env: { node: true, browser: true, }, extends: ["eslint:recommended", "plugin:prettier/recommended"], globals: { Atomics: "readonly", SharedArrayBuffer: "readonly", }, parserOptions: { ecmaVersion: "latest", sourceType: "module", }, plugins: ["prettier"], rules: { "prettier/prettier": "error", }, }; 노드 버전이 원인인가요 ?14 버전 입니다..
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
DefinePlugin 관련; env와 관련하여, (21.06.22 16:15, aloha_jh) 답변포함
DefinePlugin 보고 이런생각이 들었습니다.React.js나 Next.js로 프론트엔드 개발을 할 때, 서버주소를 보통 env || env.develop 등으로 관리했습니다. 강의와 답변을 보기 전에는 이러한 라이브러리 및 프레임워크가 env 파일을 웹팩으로 설정하여 자동으로 불러오게 만들어 주는것이라고 여겼습니다. console.log(process.env.NODE_ENV);설정한 부분을 콘솔에 기록하는 부분의 코드가 동일했기 때문입니다. 그런데 답변을 보니 DefinePlugin과 env 설정이 다른 것으로 보여서 개념상의 차이가 어떤 부분인지 싶어 질문드립니다.
-
미해결타입스크립트 입문 - 기초부터 실전까지
왜 api쪽에는 왜 에러가 안나는지 궁금합니다.
같은 index.ts 파일 내 코드인데도 tsconfig 설정이 적용되지 않고, eslint 설정까지 더 해주어야 타입 에러를 체크하는지 궁금합니다.
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
깃허브 확인 문의
git clone git@github.com:jeonghwan-kim/lecture-fronted-dev-env.gitCloning into 'lecture-fronted-dev-env'...git@github.com: Permission denied (publickey).fatal: Could not read from remote repository. 이런 오류가 뜨면서 파일이 안받아지는데 어떻게 해야할까요? ㅠ
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
폴더를 prettier로 돌렸을 때 나오는 에러 구문에 대한 질문
npx prettier ./src --write해당 구문이 적용되나요? 첫 시도에서는 성공했는데 그 이후로 부터는 실패 구문이 아래와 같이 뜨더라구요.[error] No matching files. Patterns tried: ./src !**/node_modules/** !./node_modules/** !**/.{git,svn,hg}/** !./.{git,svn,hg}/**안내 답변 가능하신가요?
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
해쉬값과 캐쉬 갱신
'웹팩 기본편 - 자주 사용하는 로더'를 학습하고 있습니다.로더들 중에, file-loader에 대해 학습하다가 질문이 생겼습니다.웹팩이 .png파일을 발견하면 file-loader를 실행할 것이고, 로더가 동작하고 나면 아웃풋에 설정한 경로로 이미지 파일을 복사합니다. 그리고 파일명이 해쉬코드로 변경 됩니다. 수업시간에 강사님께서 쿼리스트링이 매번 바뀌는 해시값으로 설정된다고 하셨는데, 그러면 빌드를 할때마다 해시값이 매번 바뀌는 건가요?그리고 이게 캐시 관점에서 어떤 도움을 주는지 궁금합니다. 파일명이 해쉬코드로 변경되는게 캐쉬 갱신을 위한 처리로 보인다고 하셨는데, 정확히 어떤점에서 캐쉬 갱신에 도움을 주는지 이해가 잘 안가서요ㅠㅠ알려주시면 감사하겠습니다!
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
Hash 에러 발생
안녕하세요 강사님.제가 npm run build로 빌드를 하려고 할때마다 다음과 같은 에러가 생기더라구요..[에러 내용]$ npm run build > sample@1.0.0 build > webpack node:internal/crypto/hash:69 this[kHandle] = new _Hash(algorithm, xofLen); ^ Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:69:19) at Object.createHash (node:crypto:138:10) at module.exports (C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\webpack\lib\util\createHash.js:135:53) at NormalModule._initBuildHash (C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\webpack\lib\NormalModule.js:417:16) at handleParseError (C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\webpack\lib\NormalModule.js:471:10) at C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\webpack\lib\NormalModule.js:503:5 at C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\webpack\lib\NormalModule.js:358:12 at C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\loader-runner\lib\LoaderRunner.js:373:3 at iterateNormalLoaders (C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\loader-runner\lib\LoaderRunner.js:214:10) at Array.<anonymous> (C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\loader-runner\lib\LoaderRunner.js:205:4) at Storage.finished (C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16) at C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9 at C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\graceful-fs\graceful-fs.js:123:16 at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' } Node.js v20.3.0위의 에러가 왜 발생했는지 찾아봤고 원인과 해결방법을 다음 링크에 정리했습니다.[정리 링크] https://github.com/SeoMiYoung/Learning/issues/6결론적으로, npm run build를 하기전에export NODE_OPTIONS=--openssl-legacy-provider위의 명령어를 한번 쳐주고, npm run build를 하면, 제대로 빌드가 작동되더라구요..!그런데 VSCode를 다시 껐다 켜면, 또 다시 위의 명령어를 입력해준 다음에 빌드를 해야되더라구요..아마, 위의 명령어는 Node.js실행시, OpenSSL의 레거시 프로바이더를 사용하도록 환경변수를 설정해주는 명령어인데, 해당 명령어는 임시적으로 현재 세션에서만 레거시 프로바이더를 사용하도록 해주는 명령어이다보니, VSCode를 껐다 켜는것처럼, 재부팅하거나 새로운 세션을 시작하는 경우에는 환경변수가 초기화되어 다시 설정해줘야되는 것 같아서 그런 것 같더라구요..!재부팅할때마다 빌드하기전에 해당 명령어를 치고 시작하는게 번거롭습니다..혹시 해결 방법이 없을까요??[참고: 버전 정보]{ "name": "sample", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "author": "", "license": "ISC", "description": "", "dependencies": { "css-loader": "^4.3.0", "file-loader": "^6.2.0", "react": "^18.2.0", "style-loader": "^1.3.0" }, "devDependencies": { "webpack": "^4.46.0", "webpack-cli": "^3.3.12" } }
-
해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
webpack.config.js에서의 CommonJS방식에 대한 질문
안녕하세요!수업시간에 보면 webpack.config.js 웹팩 설정파일을 CommonJS방식으로 작성하였는데요,웹팩은 Node.js에서 동작하는 프로그램이고,Node.js가 사용하는 모듈시스템이 CommonJS이므로 웹팩 설정파일을 CommonJS로 작성한 건 이해했습니다.그런데 문득 드는 궁금증이,CommonJS 모듈 시스템을 채택했던 NodeJS 환경에서 ES Module을 사용하려면 Babel과 같은 트랜스파일러(transpiler)를 사용했어야 했는데요. NodeJS 버전 13.2부터 ES모듈 시스템에 대한 정식 지원이 시작됨에 따라 다른 도구 없이 NodeJS에서 손쉽게 ES Module을 사용할 수 있게 되었잖아요..?그렇다면 노드버전 13.2부터는 webpack.config.js 를 CommonJS가 아닌, ES Module방식으로 작성해도 상관없는건가요?
-
해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
웹팩 버전
안녕하세요.현재 웹팩의 가장 최신버전이 5버전으로 알고 있는데,해당 강의에서는 4버전으로 진행하더라고요.제가 잘 몰라서 그런데.. 4버전으로 공부해도 상관은 없겠죠?
-
해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
웹팩-cli 버전을 명시하지 않으면 왜 에러가 날까요?
안녕하세요? 웹팩 cli를 처음 깔아보는 수강생입니다..npm install -D webpack@4 webpack-cli위의 코드처럼 그냥 webpack-cli를 깔면, 에러가 발생하는데요...그래서수업시간에 webpack-cli를 버전3을 사용한다는 글을 보고, 다음과 같이 명령어를 바꿔서 쳐보았더니npm install -D webpack@4 webpack-cli@3정상적으로 설치가 되었습니다. 왜 버전을 명시해주지 않으면 에러가 발생하나요?
-
해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
import해오는 두가지 방법에 대해 제가 잘 이해한건지 확인받고 싶습니다!!
강사님께서, 수업중에 import해오는 방법을 두가지를 언급하셨는데요,import * as math from './math.js'; // [방법1] 모든 export를 math라는 객체로 가져오기 import { sum } from './math.js'; // [방법2] sum함수만 가져오기방법1로 import할 경우, sum함수를 사용하기 위해서 math.sum(,) 이렇게 써야하지만,방법2로 import할 경우, 그냥 바로 sum(,)으로 사용하면 되나요? 저는 일단 그렇게 이해하고 있는데그러면 import * as math1 from './math1.js'; import * as math2 from './math2.js';이렇게 math1.js와 math2.js에서 각각 sum함수를 만들고, 그걸 app.js에서 위와 같이 import해서 사용했을 때,math1.sum(,) 그리고 math2.sum(,) 이렇게 쓰면 되니깐, 이름이 sum으로 같아도 충돌이 안나겠네요? 그러나 방법2방식으로 import { sum } from './math1.js'; import { sum } from './math2.js';이렇게 가져온다면, 둘다 sum(,)으로 호출하게 되니깐, 이름 충돌이 발생하겠네요?제가 이해한것이 맞는지 확인부탁드려요ㅠㅠ
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
EsLint 적용 불가 문의드립니다.
안녕하세요 강의 보고 실습 중, ESLint가 정상 작동하지 않는 것으로 보여문의 드립니다.현재 상황 (버전)npm Version : 9.6.4Vue Version : 3.2.47VsCode Version : 1.77.3설치된 확장 플러그인Auto Rename TagCSS PeekESLintHTML CSS SupportHTML to CSS autocompletionindent-rainbowKorean Language Pack For visual Studio CodeVue Language Features (Volar)Vue VSCode Snippets플러그인 충돌이 발생 할 수 있어, 기존 VS Code 전체 초기화 후 재 설치 하였습니다.강의에 나온 내용으로 .eslintrc.cjs 수정 및 Eslint.validate도 변경하였으며,오타가 있을 수 있어서 노션에 있는 코드를 그대로 복사 붙여 넣기 하였습니다.Format on save 도 체크 해제 되어 있습니다.현재 문제점이라고 생각하는 부분은npm run lint 커맨드 실행 시 PS > npm run lint> learn@0.0.0 lint> eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignoreOops! Something went wrong! :(ESLint: 8.39.0ReferenceError: Cannot read config file: \.eslintrc.cjsError: OfflineAudioCompletionEvent is not defined at Object.<anonymous> (\.eslintrc.cjs:15:70) at Module._compile (node:internal/modules/cjs/loader:1254:14) at Module._extensions..js (node:internal/modules/cjs/loader:1308:10) at Module.load (node:internal/modules/cjs/loader:1117:32) at Module._load (node:internal/modules/cjs/loader:958:12) at Module.require (node:internal/modules/cjs/loader:1141:19) at module.exports [as default] (node_modules\import-fresh\index.js:32:59) at loadJSConfigFile (\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:2562:47) at loadConfigFile (\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:2646:20) at ConfigArrayFactory.loadInDirectory (\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:2856:34)에러가 출력 됩니다.구글 검색하여 npm install eslint 등 추가로 모듈을 설치 하였으나, 실행이 되지 않습니다.이 이외에는 사실상 Error Line, Warn Line 등 소스 코드에 노란 줄이나 붉은 줄은 나오지 않아사용에는 큰 불편함은 없으나, 자동 줄 정렬이 되지 않아 소스가 상당히 지저분하며, 복습 시 소스 분석에 어려움을 겪고 있어 질문 드립니다.항상 좋은 강의 감사드립니다.요약npm run lint 커맨드 사용 불가소스 자체에 붉은 색, 노란 색 줄은 생기지 않으나 코드가 자동 정렬 되지 않음입니다.
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
파일 구조는 다르지만 저도 myWebpackLoader 콘솔이 2번이 찍혔는데요.!
지금 이런식으로 저는 파일구조가 되어있는데 저도 파일구조의 상태에서 npm run build를 했을때 콘솔창에 2번 myWebpackLoader에 작성한 문구가 나왔습니다. 이렇게 되면, index.js에서 한번 사용된거고 main.js에서 한번 사용된게 맞을까요.. ? 저 main.js는 output으로 build될때 만들어지도록 설정해놓은 파일인데, 로더가 output의 확장자와 겹칠때도 작동을 하는건가..? 싶어서 여쭙습니다!
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
mode=production 빌드 시 문제 발생
안녕하세요, 원인을 도저히 모르겠어서 질문 남깁니다.mode를 production으로 했을 때만 아래 사진처럼 에러가 나는데요, 코드상에 문제가 있는지 한번 봐주실 수 있을까요?mode=development에서는 보시다시피 잘 나옵니다.아래는 소스코드입니다.package.json{ "name": "lecture-frontend-dev-env", "version": "1.0.0", "description": "\"프론트엔드 개발 환경의 이해\" 강의 자료입니다.", "main": ".eslintrc.js", "devDependencies": { "@babel/cli": "^7.21.0", "@babel/core": "^7.21.0", "@babel/preset-env": "^7.20.2", "babel-loader": "^9.1.2", "css-loader": "^6.7.3", "html-webpack-plugin": "^5.5.0", "mini-css-extract-plugin": "^2.7.2", "sass": "^1.58.3", "sass-loader": "^13.2.0", "style-loader": "^3.3.1", "webpack": "^5.75.0", "webpack-cli": "^5.0.1" }, "scripts": { "dev": "webpack --mode=development --config webpack.config.js", "build": "webpack --mode=production --config webpack.config.js" }, "repository": { "type": "git", "url": "git+https://github.com/jeonghwan-kim/lecture-frontend-dev-env.git" }, "keywords": [], "author": "", "license": "ISC", "bugs": { "url": "https://github.com/jeonghwan-kim/lecture-frontend-dev-env/issues" }, "homepage": "https://github.com/jeonghwan-kim/lecture-frontend-dev-env#readme", "dependencies": { "core-js": "^3.29.0" } }webpack.config.jsconst path = require("path"); const webpack = require("webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = (env, argv) => { const title = argv.mode === "development" ? "(개발용)" : ""; return { entry: { main: "./src/app.js", }, output: { filename: "[name].js", path: path.resolve(__dirname, "dist"), clean: true, }, module: { rules: [ { test: /\.s[ac]ss$/i, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"], }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: "asset", parser: { dataUrlCondition: { maxSize: 20 * 1024, // 20kb }, }, generator: { publicPath: "../dist/", }, }, { test: /\.js$/i, exclude: /node_modules/, use: { loader: "babel-loader", options: { configFile: path.resolve(__dirname, "babel.config.js") }, }, }, ], }, plugins: [ new webpack.BannerPlugin({ banner: `빌드 날짜: ${new Date().toLocaleString()}`, }), new HtmlWebpackPlugin({ template: "./src/index.html", templateParameters: { env: title }, }), new MiniCssExtractPlugin(), ], }; };babel.config.jsmodule.exports = { presets: [ [ "@babel/preset-env", { targets: { ie: 11 }, useBuiltIns: "usage", corejs: 3, }, ], ], };다른 폴더 및 파일은 건드리지 않았습니다.
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
node_modules/.bin/webpack 오류가 납니다
node_modules/.bin/webpack --help 하면 이러한 오류가 나는데 이건 왜그런걸까요?
-
해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
개발환경에서 assets 파일 참조관련 질문
요약개발환경에서 src/assets/.... 에 있는 이미지 파일을 제대로 참조하는 방법이 궁금합니다. 구성요소프로젝트의 구성요소는 아래와 같습니다.public[index.html, favicon.ico]src[assets[image0, image1...], index.js 등] 설치된 패키지는 아래와 같습니다. "webpack": "^5.75.0", "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.11.1" // 본 강의에선 4.x.x 버전을 사용하지만... // 5 version을 공부해야해서... 죄송합니다 😥 설명dev server를 실행시켜 개발할 때,js 파일을 수정하면 바로 반영이 되는 걸 확인했습니다. 그런데 이미지 파일의 경우 다른 파일을 참조하도록 하면 해당 파일을 불러오지 못합니다. 그리고 build된 파일을 참조합니다.예로들어 정적 이미지 파일이 ./src/assets/image_0.jpg 라면,dev server로 실행시켜 확인하면 HOST/dist/assets/images/[hash][ext][query].jpg 이렇게 되어있습니다. (경로가 다름)그리고 build를 하면 분명 assets 디렉토리엔 다수의 이미지 파일이 존재함에도 불구하고 코드에서 사용된 이미지 파일만 build됩니다.그러면 만약 코드내부에서 동적으로 다른 static image 파일을 참조하게 된다면 해당 이미지가 없기 때문에 오류가 날텐데 이런건 어떻게 처리해야하나요? 코드const path = require('path'); const { BannerPlugin, DefinePlugin } = require('webpack'); const childProcess = require('child_process'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const isDevMode = (process.env.NODE_ENV || 'development').trim() === 'development'; console.log('is DEV mode?', isDevMode); console.log('__dirname: ', __dirname); module.exports = { mode: isDevMode ? 'development' : 'production', // entry: webpack 시작되는 부분이라고 생각하면 된다. entry: { main: './src/index.js', }, /** * output * entry point를 기준으로 * 모든 .js 파일을 합쳐서 하나의 bundle 파일로 만드는데, * 이걸 어디에 저장할 것인지 지정하는 option */ output: { path: path.resolve(__dirname, 'dist'), filename: isDevMode ? '[name].js' : 'main.[contenthash].js', chunkFilename: '[id].chunk.js', assetModuleFilename: 'images/[hash][ext][query]', clean: true, }, devServer: { port: 3000, hot: true, client: { overlay: { errors: true, warnings: false, }, }, // static: { // directory: path.resolve(__dirname, './src/assets/'), // }, }, /** * module * test에 설정한 파일들을 inspect 하여, * 조건에 맞는 파일들에 대해 loader 들을 실행하여 해석함 */ module: { rules: [ { test: /\.(sa|sc|c)ss$/i, exclude: [/node_modules/], use: [ // creates 'style' nodes from JS strings isDevMode ? 'style-loader' : { loader: MiniCssExtractPlugin.loader, options: { publicPath: '', }, }, // translates css into common JS 'css-loader', 'postcss-loader', // complies sass to css 'sass-loader', ], }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, exclude: [/node_modules/], type: 'asset/resource', parser: { dataUrlCondition: { // 크기가 8kb 미만인 파일은 inline 모듈로 처리되고 그렇지 않으면 resource 모듈로 처리됩니다. maxSize: 4 * 1042, }, }, // generator: { // publicPath: './assets/', // outputPath: './assets/', // }, }, { test: /\.js$/, exclude: [/node_modules/], loader: 'babel-loader', }, { test: /\.(woff|woff2|eot|ttf|otf)$/i, exclude: [/node_modules/], type: 'asset/resource', }, ], }, plugins: [ /** * 개발할 때 API 서버주소, * 배포했을 때 API 서버주소를 설정하는 Plugin */ // new DefinePlugin({ // NODE_ENV: 'development', // }), new BannerPlugin({ banner: `Build Date: ${new Date().toLocaleString()} Commit Version: ${childProcess.execSync('git rev-parse --short HEAD')} Author: ${childProcess.execSync('git config user.name')}`, }), new HtmlWebpackPlugin({ template: './public/index.html', templateParameters: { env: isDevMode ? '개발용' : '배포용', }, minify: !isDevMode ? { collapseWhitespace: true, removeComments: true, } : false, }), ...(!isDevMode ? [ new MiniCssExtractPlugin({ filename: isDevMode ? '[name].css' : '[name].[contenthash].css', chunkFilename: isDevMode ? '[id].css' : '[id].[contenthash].css', }), ] : []), ], }; 결론즉 정리하자면,개발모드일 때 정적 이미지 파일을 참조하도록 설정을 어떻게 해야하나요?왜 build할 땐 이미지 파일이 코드에서 사용중인 것만 빌드 되나요? 답변 주시면 감사하겠습니다.
-
미해결Nuxt.js 시작하기
'TypeError: this.oprions.parse is not a function'오류
vue 파일에서 eslint 오류가 나는데 구글링 하여 따라해봐도 오류가 사라지지 않습니다ㅜ