webpack -1 설치

webpack

• scss를 브라우저가 이해하는데 도움을 주는 브릿지
• ES6.. 을 브라우저가 이해하는데 도움을 주는 브릿지

즉, 최신 코드를 브라우저가 이해할 수 있는 옛날 버전 코드로 바꿔줌

• 리엑트, vue ,리엑트 네이티브 등등 프레임워크엔 webpack이 내장되어 있음

$ npm i webpack webpack-cli -D

$ touch webpack.config.js

webpack.config.js

• 구버전 자바스크립트만 허용한다.

필수요소.

• Entry
• output

const path = require("path");

module.exports = {
	entry: NEW_VERSION_FILE_PATH,
    mode: "development",
    output : {
    	filename : OLD_VERSION_FILE_NAME,
        path: path.resolve(__dirname,OLD_VERSION_FILE_PATH),
    }
}

webpack 실행

$ webpack --config webpack.config.js

rules

• 각각의 파일 종류에 따라 어떤 전환을 할 건지 결정하는 것

npm i -D babel-loader @babel/core @babel-preset-env