본문 바로가기
728x90
반응형

Dev/Webpack5

[Webpack] 설정파일 살펴보기 webpack.config.js var path = require("path"); var webpack = require("webpack"); module.exports = { mode: "production", entry: "./src/main.js", output: { path: path.resolve(__dirname, "./dist"), publicPath: "/dist/", filename: "build.js", }, module: { rules: [ { test: /\.css$/, use: ["vue-style-loader", "css-loader"], }, { test: /\.vue$/, loader: "vue-loader", options: { loaders: {}, // other vue.. 2020. 9. 17.
[Webpack] Dev Server Webpack Dev Server 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구로 Webpack의 빌드 대상이 변경되었을 때 매번 Webpack명령어를 실행하지 않아도 코드만 변경하고 저장하면 Webpack으로 빌드한 후 브라우저를 새로고침 해준다. 매번 명령어를 치는 시간과 브라우저를 새로고침하는 시간, Webpack 빌드 시간을 줄여주기 때문에 Webpack 기반의 웹 애플리케이션 개발에 필수로 사용된다. 특징 Webpack Dev Server는 일반 Webpack 빌드와 다른점이 있다. "scripts": { "dev": "webpack-dev-server", "build": "webpack" } Webpack Dev Server를 실행하여 Webpack 빌드를 하는 경우에는 빌드한 결과.. 2020. 9. 16.
[Webpack] ES6 Modules import & export 자바스크립트의 코드를 모듈화 할 수 있는 기능 모듈화 다른 파일에 있는 자바스크립트의 기능을 특정 파일에서 사용할 수 있는 것 모듈화의 필요성 자바스크립트는 다른 프로그래밍 언어처럼 파일 마다 변수의 유효 범위가 다른게 아니라 기본적으로 변수의 유효 범위가 전역으로 잡히기 때문에 다음과 같은 예제 페이지 로딩 시 원하는 결과를 얻지 못한다. // a.js var total = 100; function getTotal() { return total; } // b.js var total = 200; 기본 문법 import export된 변수나 함수를 {}에 선언한 뒤 해당 파일이 있는 경로를 작성한다. import { 불러올 변수 또는 함수 이름 } from '파일 경로'; ex.. 2020. 9. 16.
[Webpack] Webpack Webpack 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler) 모듈(Module) 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위 모듈 번들러(Module Bundler) 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구 Webpack의 등장 배경 파일 단위의 자바스크립트 모듈 관리의 필요성 입문자 관점에서 고안된 자바스크립트의 변수 유효 범위는 기본적으로 전역 범위를 갖는다. 최대한 넓은 변수 범위를 갖기 때문에 어디에서도 접근하기가 편리하다. 전역 유효범위로 인한 문제점 // app.js var num = 10; function getN.. 2020. 9. 15.
[Webpack] NPM NPM (Node Package Manager) 전 세계 자바스크립트 라이브러리가 있는 공개 저장소 npm | build amazing things Build amazing things We're npm, Inc., the company behind Node package manager, the npm Registry, and npm CLI. We offer those to the community for free, but our day job is building and selling useful tools for developers like you. Take your JavaScript devel www.npmjs.com NPM 사용 시 장점 라이브러리 목록과 버전관리가 용이 라이브러리 CDN 사용 .. 2020. 9. 14.

티스토리툴바