일기장처럼 쓰이지만, 블로그인 일기장

src 디렉토리 안에 img 디렉토리를 생성하고 간단한 이미지를 준비한다 css.png는 css의 background로 로딩하고 image.png는 html에서 img 태그로 로딩하려고 한다 package.json의 내용은 위와 같다 webpack_image 디렉토리에서 "npm install --dev" 명령를 입력하여 모듈을 설치한다 style.css, app.js, index.html 파일이다 style.css에서 body에 background 속성으로 img 디렉토리의 css.png파일을 불러왔으며 index.html에서 img 태그에 경로명을 그래도 적지 않고 require를 사용하여 이미지의 경로를 지정하여 준다 webpack.config.js파일이다 여기서 중요한 부분은 이미지를 로딩하기 위..

이번에는 두개의 html로 각각 번들링을 하기 위한 예제이다. [index.html, index.css, style.css, index.js, common.js] [multiple.html, multiple.css, style.css, multiple.js, common.js] 위와 같은 묶음으로 번들링을 하도록 한다. package.json의 내용은 위와 같다 webpack_multiple_template 디렉토리에서 "npm install --dev" 명령를 입력하여 모듈을 설치한다 index.html과 multiple.html에 공통으로 번들링될 style.css와 common.js 파일이다 common.js에는 exports로 모듈로 만들어서 index.js와 multiple.js에서 requir..

우선 디렉토리 구조이다 src 디렉토리의 app.js, index.html, color.css, layout.css 이 네가지 파일을 번들링 하려고 한다 모듈들을 간단하게 설치 하기 위하여 package.json 파일을 사용하도록 한다. 개발에 필요한 모듈은 devDependencies에 등록되어 있으며 해당 모듈을 설치 하기 위하여 "npm install --dev"를 입력한다. 설치가 정상적으로 완료 되면 결과가 트리 구조로 타나난다 이제 각 파일의 내용이다 src/app.js에는 번들링할 css 파일을 선언해준다 css의 결과를 나타낼 간단한 html 파일이다 하나의 파일로 번들링할 두개의 css 파일이다 webpack.config.js에서 module에서 css에 대한 rule의 loader와 아..

npm을 사용하기 위하여 우선적으로 node.js를 설치한다 https://nodejs.org/ko/ 위와 같이 디렉토리와 파일을 생성한다 위 package.json을 작성한다 "npm install --dev" 명령어로 모듈을 설치한다 설치가 완료 되면 위와 같은 설치한 모듈이 트리 구조로 나타난다 webpack.config.js webpack을 실행시 사용할 설정 파일 html 파일 app.js 파일 webpack_start 디렉토리에서 webpack 명령어를 실행하면 위와 같이 번들링 결과가 나타나며 dist 디렉토리에 번들링 된 파일이 생성된다 dist 디텍토리의 index.html 파일을 웹 브라우저로 실행하면 위와 같은 페이지가 나타난다 app.js의 결과는 개발자 도구를 통하여 확인이 가능하다