NODE JS - WEBPACK 설치와 사용법

​

◎ WEBPACK

▼ 내용

WEBPACK 이란 다양한 신기술? 등의 프로그래밍파일들을 웹페이지에서 호환되도록 변환해주는 번듈러이다. ES6 문법이라든가 SCSS 같은 파일들을 웹브라우저에서 읽을수 있게 ES5,CSS 로 변환시켜준다.

​

▼ 설치법

webpack,webpack-cli 설치

webpack : node 에서 webpack를 사용하기 위함.

webpack-cli : 터미널에서 webpack를 사용하기 위함.

npm install webpack webpack-cli

▼ extract-text-webpack-plugin 설치법

loader 를 사용하기위한 모음 엄마같은놈(?)

npm install extract-text-webpack-plugin@next //@ 뒤에 next는 최신버전(beta)으로 설치하기 위함이다. 만약 뒤에 버전 2.4 를 설치하면 버전 2.4를 설치한다. //이건 플러그인일 뿐이고 webpack.config 에 plugins: [new ExtractCSS("styles.css")] 를 써줘야한다

▼ loader 설치

npm install css-loader postcss-loader sass-loader node-sass babel-loader

▼ post css 의 추가 플러그인 과 그외 패키지 설치

npm install autoprefixer -------------- 사용법---------------------- const autoprefixer = require("autoprefixer"); { loader: "postcss-loader", //CSS의 호환성과 관련된걸 해결해줌 EX) IE 지원문법변환 options: { // options 라는 프로퍼티를 추가해서 함수를 만들어 배열로 리턴해준다 plugin(){ return [autoprefixer({browsers : "cover 99.5%"})]; } } } ----------------------------------------------------- npm install @babel/polyfill // 최신문법을 이해하게 도와주는 플러그인

​

---

▼ 실행방법

기존엔 Node 에서 npm run start로 하나만 실행하였다면 이제는 콘솔 2개로 하나는 start에 썻던걸 사용하고 하나는 webpack을 실행해야한다. 그러기 위해 아래 소스를 package.json 에 적용시켜주자.

"scripts": { "dev:server" : "nodemon --exec babel-node init.js --delay 2", "dev:assets" : "webpack" //"start": "nodemon --exec babel-node init.js --delay 2" },

그리고 그후 제일 상위에 webpack.config.js 란 이름을 만들어 환경설정을 해줘야한다. 만약 이 이름을 사용하지않고 다른 이름을 사용하려면.. 해당 config 의 파일 이름을 package.json 에 지정해줘야한다.

"dev:assets" : "webpack" --config [파일명]

webpack.config.js 는 서버코드를 작성하면안된다 오로지 클라이언트코드를 위한걸 작성해야한다

그렇기 때문에 wabpack.config.js 에는 ES6 문법또는 최신 문법을 쓰면 안된다. (EX: import 등)

조금더 자세한 설명은 webpack config 파일의 주석을 보시면되겠숨돠.

​

터미널에서 실행할때는

npm run dev:assets // CSS, JS 변환 실행 명령 npm run dev:server // 서버 실행 명령 // 결국엔 둘다 실행 1번 서버 2번 어셋

---

▼ webpack.config.js

const path = require("path"); const ExtractCSS = require("extract-text-webpack-plugin"); const autoprefixer = require("autoprefixer"); const MODE = process.env.WEBPACK_ENV; const ENTRY_FILE = path.resolve(__dirname,"assets","js","main.js"); //path.resolve 는 이전경로는 무시하고 맨 마지막 경로만 출력 ex) path.resolve('/a', '/b') // Outputs '/b' // 또한 path.resolve 는 항상 절대url 을 생성 그리고 이것을 만들기 위해 현재의 위치를 기본으로 사용 const OUTPUT_DIR = path.join(__dirname,"static"); //path.join 은 이전 인수까지 전부 출력 ex) path.join('/a', '/b') // Outputs '/a/b' //__dirname는 파일의 절대경로 const config = { entry : ["@babel/polyfill", ENTRY_FILE], //entry 는 파일이 들어오는곳 mode : MODE, module : { //module 이 의미하는건 module를 발견할떄마다 rules 라는 조건을 따르라고한다. rules: [//rules는 test의 정규식을 따른걸 만나면 use 를 사용한다. //rules는 특정 확장자의 파일을 브라우저가 이해할수있게 변환해준 역활을 한다 { test : /\.(scss)$/, use : [ { loader : 'babel-loader' //js es6 문법을 구식으로 바꿔줌 } ] }, { test: /\.(scss)$/, //확장자가scss 인파일을 찾는다. //정규식 시작은 /\ 로시작하며 마지막엔 $/ 로 끝난다 use: ExtractCSS.extract([ //use 의 plugin 은 내부에서 또다른 plugin을 사용하고있다. //그 이유는 scss 파일을 일반적인 css 파일로 통역해야한다 { //loader 란 건 기본적으로 webpack에게 파일을 처리하는 방법을 알려주는놈 loader: "css-loader" //이걸 사용해야 webpack 가 css를 이해한다 }, { loader: "postcss-loader", //CSS의 호환성과 관련된걸 해결해줌 EX) IE 지원문법변환 options: { plugins(){ return [autoprefixer({browsers : "cover 99.5%"})]; } } }, { loader: "sass-loader" //scss or sass 를 일반 css로 바꿔주는 plugin } ]) } // 원래대로라면 프로그래밍은 처음부터 차례대로 진행되지만 config 에선 거꾸로 작업을 한다. // 그래서 sass파일읽고 -> post.css 호환성변환 -> css변환 이렇게 순서적으로 처리하는 작업을 // 진행방향역순으로 loader를 써준다라 css로더 , 호환성변환 , sass 로더 를 사용한다 ] }, output : { //output 은 파일이 나가는곳 이다. output 은 객체여야 한다 path : OUTPUT_DIR, filename : "[name].js" //[name].[format]" 파일의 이름과 파일의 확장자,형식 이다. }, plugins: [new ExtractCSS("styles.css")] // use: ExtractCSS.extract 로 extract에 저장한 파일을 export 해준다 }; //entry 로 sass or scss 파일을 읽어서 css로변환해주고 그 변환된 파일을 output 으로 파일생성해준다. module.exports = config;

▼ pakage.json

{ "name": "wetube", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "@babel/core": "^7.3.4", "@babel/node": "^7.2.2", "@babel/polyfill": "^7.4.3", "@babel/preset-env": "^7.3.4", "autoprefixer": "^9.5.0", "babel-loader": "^8.0.5", "body-parser": "^1.18.3", "cookie-parser": "^1.4.4", "css-loader": "^2.1.1", "dotenv": "^7.0.0", "express": "^4.16.4", "extract-text-webpack-plugin": "^4.0.0-beta.0", "helmet": "^3.16.0", "install": "^0.12.2", "mongoose": "^5.4.20", "morgan": "^1.9.1", "multer": "^1.4.1", "node-sass": "^4.11.0", "npm": "^6.9.0", "postcss-loader": "^3.0.0", "pug": "^2.0.3", "sass-loader": "^7.1.0", "webpack": "^4.29.6", "webpack-cli": "^3.3.0" }, "devDependencies": { "eslint": "^5.16.0", "eslint-config-airbnb-base": "^13.1.0", "eslint-plugin-import": "^2.16.0", "nodemon": "^1.18.10" }, "scripts": { "dev:server": "nodemon --exec babel-node init.js --delay 2", "dev:assets": "webpack --mode development -w",// "build:assets" 는 내코드를 server 에 올려준다 // -w 를 붙이는 이유는 watch 란 뜻이다 css 파일을 수정할때마다 webpack을 다시 실행시키기 싫어서 써놧다 //webpack.config 파일을 수정할경운 다시실행해야한다 "build:assets": "webpack --mode production" }, "keywords": [], "author": "", "license": "ISC" } //"start": "nodemon --exec babel-node init.js --delay 2" //WEBPACK_ENV=development = webpack --mode 를 붙인 이유는 mode를 설정해주기 위해서

---

◎ WEBPACK - LOADER 부연설명

​

▼ POST CSS

POST CSS 를 통해서 Autoprefixer 을 사용하면 각각의 브라우저 별로 호환되게 바꿔준다

:fullscreen{ } ------------------------- :-webkit-:full-screen{ // webkit 은 safari , chrome } :-moz-:full-screen{ // -moz- 는 firefox } :full-screen{ }

▼ SASS 변수만들기

//Variables.scss $bgColor : red; $sexyColor : peru; //styles.scss body{ background-color: $sexyColor; color : $bgColor; } //이렇게 scss 는 변수를 사용할수 있다.

---

◎ PARCEL

​

▼ 내용

PARCEL 이란 WEBPACK 과 같은 모듈 번듈러이다. 다양한 신기술? 등의 프로그래밍파일들을 웹페이지에서 호환되도록 변환해주는 번듈러이다.

​

▼지원 파일

　●CSS

　●SCSS

　●Images

　●Babel

　●PostCSS

　●PostHTML

　●TypeScript

　●ReasonML/BuckleScript

　●ReasonReact

​

설치법은 CSS 메뉴에 POST-CSS , PARCEL 에 관한게 있다 그걸 참조.

---

​