Ideveloper's software blog

Webpack:Webpack 0부터 CRA 까지 | 웹팩 사용전번들러 (browserify)reload (browser sync)transform (babel, babelify(browserify 와 연결))| 웹팩 사용후번들러 (webpack)reload (webpack dev server)transform (babel-loader)웹팩이 cache를 사용해 속도를 향상 시킴.hot module: 바뀐 위치에 다른 모듈을 끼어넣음module: 모든것이 모듈이다. browserify (오직 js 빌드) 웹팩(모든 파일을 빌드) | 바벨6->바벨7babel-preset-env -> @babel/preset-env.babelrc-> babel.config.js | 웹팩3->웹팩4webpack-dev-serv..

Webpack :웹팩 4 뽀개기 (개발하기 sourcemap,서버 setting(webpack dev server ) 이 글은 웹팩 4 공식사이트를 번역하여 정리한 글입니다. 피드백 환영합니다! | Using source maps웹팩이 코드를 번들링할때, 에러를 원래파일에서 트래킹하기가 어려워집니다.예를 들어, a.js ,b.js c.js라는 세가지 파일을 bundle.js라는 하나의 파일로 번들링했을때, 하나의 파일이 에러를 나타내면 에러는 단지 bundle.js파일에 에러가 있다고만 말할것입니다. 이것은 정확히 어디서 에러가 났는지 확인하지 못하게 합니다.쉽게 에러를 트래킹하기 위해서, 자바스크립트는 source map이라는 것을 제공합니다. 컴파일 된 코드를 원래 소스코드로 맵핑을 해주는 역할을 합..

Webpack :웹팩 4 뽀개기 (Concepts) 이 글은 웹팩 4 공식사이트를 번역하여 정리한 글입니다. 피드백 환영합니다! | 개념(Concepts) 웹팩은 자바스크립트 application의 static 모듈 번들러 이다. 웹팩이 application을 처리할때 내부적으로 모든 모듈들이 프로젝트에서 어디에서 필요한지의존성 그래프를 바탕으로 하나 또는 더 많은 수의 bundle을 만들어낸다. 4.0버전 이후에 웹팩은 프로젝트를 bundling할때 configuration 파일이 필요하지 않게 되었다. 그럼에도 불구하고 configuration 작업은 필요에 맞게 작업을 하기 위해서는 필요하다. 시작하기에 앞서 중요한 개념들을 알아야한다.EntryOutputLoadersPlugins| Entry 엔트..

Webpack:웹팩 경로 설정시 src라는 이름으로 alias만들기 | webpack.config.js 설정 아래를 webpack.config에 넣어주면 된다. resolve: { alias: { src: path.resolve(__dirname, "./src") } }, https://webpack.js.org/configuration/resolve/#resolve 참고

Webpack - 웹팩 환경 세팅하기 | 시작하기에 앞서, create-react-app 명령어로 리액트 프로젝트를 만들면 자동으로 웹팩 설정이 잡혀서 프로젝트가 만들어져서, 웹팩 관련한 설정을 알기가 쉽지 않다. 예전에는 create-react-app이 없을때는 리액트 프로젝트를 하기위해 웹팩 설정을 일일히 다해줬었다고 한다. 웹팩 관련한 설정은 어떤것이 있는지, 또 웹팩에 대해 더 상세히 파헤쳐보고자 직접 환경을 세팅해 보고 creact-react-app으로 만든 프로젝트를 eject 시켜 비교해보자. http://jusungpark.tistory.com/52 참고 | 프로젝트 시작하기예제 프로젝트를 시작하기에 앞서 package.json 파일을 먼저 만들어준다.package.json 파일은 내가 만..

Webpack - 웹팩(Webpack) http://blog.jeonghwan.net/js/2017/05/15/webpack.html 참고 https://hjlog.me/post/117 참고 | 들어가기전, 리액트를 시작한지 얼마 되지 않아서, create react app 명령어 하나면 웹팩관련설정이나 관련한 설정이 다 된 상태로 리액트 프로젝트가 만들어지기 때문에 웹팩에 대해서 깊이 알지 못했었다. 프론트엔드 개발자라면, 필수적으로 알아야 하는 개념이기 때문에 학습해 보았다. | 웹팩이란? 웹팩이란 것에 대해서 일단 어떤것이기 알기위해 검색해서 여기저기 블로그를 찾아다니며 그 개념에 대해서 찾아 보았다. 그는 아래와 같다. Webpack은 모듈 번들러로서, 큰 파일을 서로간의 종속성을 갖는 여러 작은..