Webpack

Webpack 이미지 경로 처리

W

참고 : 현재상황 파일 구조 style.scss #page { overflow: hidden; .bg{ background:url('./assets/bg.png') no-repeat; overflow:hidden; } .... webpack.config.js const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const join = require('path').join; module.exports = { entry:...

Module not found: Error: Can’t resolve ‘./keyboard’ in ‘..\Desktop\tetris\src’

M

문제상황 keyboard.ts파일에 Keyboard class를 만들고, export했다. main.ts파일에서 keyboard.ts파일을 import했는데 다음과 같은 에러가 나왔다. Module not found: Error: Can't resolve './keyboard' in 'C:\Users\W24946\Desktop\tetris\src' 내 코드 keyboard.ts class Keyboard { ..... } export default Keyboard main.ts import './style.css'; import Keyboard from './keyboard'; const a = new Keyboard(); 해결방안 찾기 webpack.config.js 파일에 문제가? webpack에서...

code ELIFECYCLE errno 1

c

문제상황 typescript와 webpack을 같이 사용하려고 했다. webpack, webpack-cli, webpack-dev-server를 devDependencies로 깔고 typescript는 global로 깔았다. 근데 build해보니까 아래와 같은 에러가 났다. ./src/main.ts 1.01 KiB [built] [code generated] 1 ERROR in child compilations webpack 5.4.0 compiled with 1 error in 1919 ms npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! tetris@1.0.0 build: `webpack` npm ERR! Exit status 1 npm ERR! npm ERR...

option ‘–open ‘ argument missing

o

문제상황 webpack, webpack-cli, webpack-dev-server를 깔고, 공식사이트에 나온대로 webpack serve --open 를 쳤다. 근데 다음과 같은 에러가 나왔다. error: option '--open <value>' argument missing npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! hooks@1.0.0 start: `webpack serve --open` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the hooks@1.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely...

Webpack4 설정

W

React 프로젝트를 시작할때 Webpack을 설정하는게 쉽지 않다. 그래서 한번 기본적인것들을 정리해보려한다. 그래야 다음에 새로 시작할때 덜 헤맬것 같다. 목차 webpack.config.jsentryoutputmodule( + loader)plugindevServerdevtoolBabel 설정기타등등 webpack.config.js Zero configuration Webpack4에와서 webpack.config.js파일은 더이상 필수가 아니다. Create-React-App처럼 별다른 configuration없이 webpack을 사용할 수 있다. 하지만 나는 webpack을 내 입맛대로 사용하고 싶기 때문에 webpack.config.js를 사용한다. 용도 webpack.config.js 파일은...

publicPath의 역할

p

prefix module.exports = { output: { path: path.resolve("./examples/dist"), filename: "app.js", publicPath: "/assets/" } } Webpack설정을 위와같이 했을때, <img src="picture.jpg">라는 코드를 Webpack은 <img src="/assets/picture.jpg">이렇게 바꿀것이다. 그래서 내 앱이 에서 돌아가고 있다면, 브라우저는 파일을 읽어들일것이다. 이런 prefix의 기능을 활용해서 js / css / font파일이 cdn서버에서 가져와질 수 있도록 할 수 있다. publicPath : "" 이렇게 해놓으면 파일들의 root path가 다 cdn.com으로 되서...

Module not found: Error: Can’t resolve ‘object-assign’

M

문제상황 webpack.config.js const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const join = require('path').join; module.exports = { entry: join(__dirname, '/src/index.tsx'), devtool: 'source-map', output: { filename: "main.js", path: join(__dirname, '/dist'), }, module: { rules: [{ test: /\.(ts|tsx)$/, exclude: /node_modules/...

Create React App없이 React + Typescript 환경설정

C

NPM npm init 이것저것 설치하기 (스크롤을 많이 내리다 보면, 한번에 설치하도록 코드를 작성해 놓았습니다. 일일이 복붙 할 필요 없습니다.) Webpack webpack / webpack-cli webpack을 쓰려면 당연히 필요하니까, webpack과 webpack-cli모듈을 설치해준다. npm install --save-dev webpack webpack-cli webpack-dev-server local 환경에서 편하게 테스트해보려면 필요하다. npm install --save-dev webpack-dev-server typescript typescript -> javascript 변환해주는 typescript모듈이 필요하다. npm install --save-dev typescript...

React Tetris 따라만들면서 배운것들

R

document.hidden 현재 탭이 활성상태인지(보이는지) 체크하는 속성값이다. document.addEventListener("visibilitychange", function() { console.log(document.hidden); }); 위 코드를 console창에 입력하고 해당 브라우저에서 탭을 새로 만들어서 왔다리 갔다리 해보면 log에 true -> false -> true 이런식으로 찍히는걸 볼 수 있다. parseInt parsetInt(string, radix) 두번째 인자인 radix는 해당 string을 몇진수로 해석할건지를 의미한다. parseInt 함수는 특정 radix(진수)값에 따라 문자열 아규먼트 내용의 해석을 하고, 그 영향을 받은 정수 값을 생성합니다...

Tetris Clone(2) – 여러가지 설정들

T

ESLint module.exports = { "extends": "airbnb", "installedESLint": true, "plugins": [ "react" ], "rules": { "react/jsx-filename-extension": [2, { extensions: ['.js','.jsx'] }], "func-names": [0], "new-cap": [2, { newIsCap: true ,capIsNew: true, capIsNewExceptions: ['List', 'Map']}], "linebreak-style": [0] }, "env": { "browser": true } }; ESLint에 관한 설명은 ESLint 사용법(1) 과 ESLint 사용법(2) 를 참고하시길 바랍니다...