WEBPACK

npm 라이브러리 버전 올리기이름구 버전현 버전 webpack3.8.0    4.44.2 webpack-dev-server2.9.73.11.3 webpack-cliX3.3.0 html-webpack-plugin2.30.13.2.0 vue-loader13.3.014.2.2 uglifyjs-webpack-plugin1.1.1X extract-text-webpack-plugin3.0.24.0.0-beta.0 @babel/coreX7.23.2 @babel/preset-envX7.23.2 babel-loader7.1.18.2.5 babel-core6.22.1X babel-preset-env1.3.2X compression-webpack-pluginX4.0.1 웹팩버전과 맞춰야함 compressionX1.7.4 s..

번들러(Bundler)란? 번들러는 모듈화 된 자바스크립트 파일을 하나로 합치는 도구이다. 브라우저는 모듈화 된 자바스크립트를 읽지 못하기 때문에 브라우저가 코드를 읽고 실행하기 위해서는 번들러가 반드시 필요하다. 프레임워크를 사용하게 되면 필수로 번들러를 사용해야 하는데 프레임워크를 쉽게 시작하기 위해 보일러플레이트(boilerPlate) 코드를 사용하곤 하는데 보일러플레이트 안에는 기본적으로 번들러가 내장되어 있다. npx create-react-app my-project리액트를 보일러플레이트 코드로 프로젝트를 시작하게 되면 package.json 파일안에 실행 script들이 명시되어 있는데 그 안에 react-scripts 안에 Webpack 이 내장되어 있다. CRA 프로젝트는 디렉토리를 간결하..

copy-webpack-plugin 이란? 디렉토리 또는 파일을 최종 빌드 폴더안에 포함시키는 플러그인 npm i -D copy-webpack-plugin사용법 // webpack.config.js const path = require('path'); const CopyWebpackPlugin = require('copy-webpack-plugin'); plugins: [ new CopyWebpackPlugin( [ { // to 는 입력하지 않으면 default로 설정한 빌드 디렉토리에 복사가 됨 from: path.resolve(__dirname, "복사 할 파일") }, { from: path.resolve(__dirname, "../*banner.html") }, { ..