웹팩
05_Webpack 여러 loader들
File Loader img파일을 모듈로 다루는 법을 알아보자. 저저번글부터 사용한 프로젝트에 assets파일을 하나 만들고 아무이미지나 두장 넣는다. npm i file-loader -D file-loader를 설치하고 { test: /\.(png|jpe?g|gif)$/i, //$는 끝을 의미 i는 대소문자를 가리지 않겠다는 의미 use: [ { loader: "file-loader", options: { name: "[contenthash].[ext]", // ext : 확장자 }, }, ], }, module의 rules에 위와같은 코드를 넣어서 loader를 적용시킨다. 이제 loader를 적용시키는법은 어느정도 익숙해졌을 것이다. //index.js import "normalize.css"; i..
04_Webpack 설정
handlebars 화면을 표현할 수 있는 템플릿 엔진 Model 문서에 노출시킬 데이터 Template 데이터가 문서에 어떻게 보여질지도 작성되어있음 위 두개를 컴파일을 거쳐 View가된다! View 템플릿내에 데이터가 담겨있는 완성된 뷰 그럼이제 handlebars를 사용해보자. npm i -handlebars -D npm i handlebars-loader -D //webpack.config.js const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./index.js", output: { filename: "bundle.js", path: path..
03_Webpack 기본구조
Webpack Webpack은 웹어플리케이션에 도움을 주는 하나의 도구이다. Webpack의 기본 구조 https://webpack.js.org/ webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. webpack.js.org Webpack의 공식문서에 가면 가장먼저 보이는 이미지가 위 이미지이다. 다양한 확장자로이루어져서 서로 연결되어 있는 파일들이 뭔가 깔끔하게 정리된 모습을 확인할 수 있다...