본문 바로가기

webpack6

[Webpack] 첫 빌드하면서 만난 오류 기록 throw new WebpackOptionsValidationError(webpackOptionsValidationErrors); ^ WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration misses the property 'entry'. object { : non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function -> The entry point(s).. 2021. 6. 28.
[Webpack] webpack plugins 정리 2021.06.25 - [Frontend/Webpack] - [Webpack] devServer option 정리 [Webpack] devServer option 정리 2021.06.25 - [Frontend/Webpack] - [Webpack] webpack option 정리 [Webpack] webpack option 정리 웹팩을 사용하면서 설정해논 옵션이 어떤 옵션인지 알기 위해서 낱낱히 파해치는 작업을 했었는데, 보기 힘들어.. vvh-avv.tistory.com 공식홈페이지를 많이 참고해서 정리하였으나, 지나가시는 분 중 제 설명에 틀린 점이 있다면 편하게 지적 부탁드립니다 :) PortFinder 실행 가능한 포트를 찾아주는 플러그인 실행 가능한 포트를 찾아서 devServer 에 연결도 가능.. 2021. 6. 25.
[Webpack] devServer option 정리 2021.06.25 - [Frontend/Webpack] - [Webpack] webpack option 정리 [Webpack] webpack option 정리 웹팩을 사용하면서 설정해논 옵션이 어떤 옵션인지 알기 위해서 낱낱히 파해치는 작업을 했었는데, 보기 힘들어서 그냥 따로 정리하기로 했다! 2021.06.25 - [Frontend/Webpack] - [Webpack] 이미 올라가있 vvh-avv.tistory.com 공식홈페이지를 많이 참고해서 정리하였으나, 지나가시는 분 중 제 설명에 틀린 점이 있다면 편하게 지적 부탁드립니다 :) clientLogLevel inline 모드를 사용할 때 DevTools 콘솔에서 표시될 lovel (df. info) webpack6 이후부터는 제거될 옵션이라고 .. 2021. 6. 25.
[Webpack] webpack option 정리 웹팩을 사용하면서 설정해논 옵션이 어떤 옵션인지 알기 위해서 낱낱히 파해치는 작업을 했었는데, 보기 힘들어서 그냥 따로 정리하기로 했다! 2021.06.25 - [Frontend/Webpack] - [Webpack] 이미 올라가있는 웹팩 설정을 뜯어보자. [Webpack] 이미 올라가있는 웹팩 설정을 뜯어보자. 지금 유지보수하고 있는 모니터링 시스템은 운영중인 사이트와 다르게 vue.js (+webpack) 설정으로 구성되어 있다. 다른 사람이 설정해놓은 웹팩을 가져다 쓰기 보다는 이해하고 사용하고 싶어서, vvh-avv.tistory.com 공식홈페이지를 많이 참고해서 정리하였으나, 지나가시는 분 중 제 설명에 틀린 점이 있다면 편하게 지적 부탁드립니다 :) context 복잡한 상대경로를 쉽게 사용하.. 2021. 6. 25.
[Webpack] 누군가 해둔 웹팩 설정을 뜯어보자. 지금 유지보수하고 있는 모니터링 시스템은 운영중인 사이트와 다르게 vue.js (+webpack) 설정으로 구성되어 있다. 다른 사람이 설정해놓은 웹팩을 가져다 쓰기 보다는 이해하고 사용하고 싶어서, 하나씩 분석해보기로 했다. (참고: webpack 은 3.x 버전이다) 우선, 각 환경별로 설정되어 있는 webpack config 에서 공통으로 사용하는 webpack.base.conf.js 'use strict'; const webpack = require('webpack'); const path = require('path'); const utils = require('./utils'); const config = require('../config'); const vueLoaderConfig = req.. 2021. 6. 25.
[javascript] Uncaught SyntaxError: Cannot use import statement outside a module 별 특별한게 없는 기본 HTML 파일에서 webpack 으로 말아서 올린 exportScript.js 에 있는 `consoleTest()` function 을 쓰고자 하니까 아래와 같은 오류가 발생했다. 에러 메세지 그대로, 외부에 있는 module 을 사용할 수 없다는 뜻이었고. 해결은 CDN 선언부에서 script type 을 "module" 로 지정해주니까 되었다. 덧, exportScript.js 는 window 에 event 바인딩이 되지 않아서 맨 밑에 저 라인까지 추가해주었다. export let exportScript = { ... }; window.exportScript = exportScript; 2021. 1. 7.