[유튜브 클론코딩] 4. WEBPACK - ES6 with Webpack

babel-loader

진보한 자바스크립트를 끼워넣어서 어떻게 될지 시험해보겠다.

import "../scss/styles.scss";

const something = async() => {

    console.log('something');

}

↑ main.js

작성하고 npm run dev:assets로 실행

 

근데 사실 만들어진 파일은 똑같다.

사실은 조치를 취해야 된다. 즉, 옛날 자바스크립트로 만들어주어야 한다.

npm install babel-loader로 바벨로더를 설치한다.

webpack.config.js로 가서 rule을 하나 더 추가한다.

 

npm run dev:assets로 실행해본다.

 

그리고 static 폴더에 있는 main.js를 보면 사실 거의 같지만, 잘 작동한 것이다. 이렇게 하면 문제 없을 것이다.

 

-w 붙이기

 "scripts": {

    "dev:server": "nodemon --exec babel-node init.js --delay 2",

    "dev:assets": "cross-env WEBPACK_ENV=development webpack",

    "build:assets": "cross-env WEBPACK_ENV=production webpack"

  },

↑ package.json

그리고 또 한가지 알아야 할 것은 package.json에 있는 "scripts"를 보면 현재

이런 상태이다.

"scripts": {

    "dev:server": "nodemon --exec babel-node init.js --delay 2",

    "dev:assets": "cross-env WEBPACK_ENV=development webpack -w",

    "build:assets": "cross-env WEBPACK_ENV=production webpack"

  },

↑ package.json

webpack의 파일들을 수정할 때마다 webpack을 끄고 다시 실행시켜주고 그런 귀찮은 짓은 하고 싶지 않기 때문에 -w를 붙인다.

-w를 붙이면 파일들을 지켜보고 있다가(watch) 만약 변화가 생기면 webpack을 다시 실행시켜 주는 것이다.

 

main.pug에 webpack으로 만든 파일(css, js) 연결해주기

지금 layouts 폴더에 있는 main.pug로 가서 views에 변화를 줄 것인데, 여기에 새로운 stylesheet 파일과 js파일을 연결해 준다.

 

doctype html

html

    head

        link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.15.2/css/all.css", integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu", crossorigin="anonymous")

        title #{pageTitle} | #{siteName}

        link(rel="stylesheet", href = "/static/styles.css")

    body

        include ../partials/header

    

        main

            block content

        include ../partials/footer

        script(src="/static/main.js")

↑ main.pug

문제는 이것을 서버에 아직 알려주지 않았기 때문에 app.js로 가서 upload를 처리해줬던 것 처럼 static route를 추가해 주어야 한다.

 

서버에 알려주는 코드 넣기

const app = express();

app.use(helmet());

app.use(function(req, res, next) {

    res.setHeader("Content-Security-Policy", "script-src 'self' https://archive.org");

    return next();

    });

app.set("view engine", "pug");

app.use("/uploads", express.static("uploads"));

app.use("/static", express.static("static"));

↑ app.js

누군가 static으로 가려고 하면, static 폴더로 가보라고 하는 것이다.

 

이제 시작해 볼 것인데 일단 서버부터 실행시켜야 한다. npm run dev:server

그리고 다른 서버에서 npm run dev:assets

 

이제 localhost:4000으로 접속해보면 배경이 빨간색으로 바뀐 것을 볼 수가 있다.

(main.pug에 styles.css를 연결시켰기 때문이다.)

-w를 붙여서 항상 지켜보고 있기 때문에 webpack에 대한 것을 변경하더라도 자동으로 반영이 된다.

예를 들면 현재 배경이 빨간색인데 peru 색으로 바꾸고 저장하면 새로고침하면 배경색이 peru 색으로 바뀐다.

 

이게 다야. 얘기 했듯이, webpack을 전부 다 이해하지 못했다고 해서 너무 걱정하지 마

그냥 한 가지만 기억해, 아니 하나는 아니고 여러가지지만 간단해

entry가 있고, mode가 있고(development 혹은 production)

rules가 있고 각종 loader가 있고 output이 있다.

 

babel-polyfill 설치하고 설정하기

일단 현재 페이지를 console로 확인해보면 어떤 오류가 나고 있다 그것을 해결하려고 한다.

구글 크롬이 async를 어떻게 처리해야하는지 모르기 때문에 polyfill이라는 것을 설치하도록 한다. babel-polyfill을 설치할 것이다.

babel-polyfill은 충전솜(polyfill)인데 브라우저에 아직 없는 무언가를 보유하고 있는 것이다. 그러니까 브라우저의 구멍을 메워주는 자바스크립트 파일 같은 것이다.

babel은 polyfill을 포함하고 있는데 polyfill은 custom regenerator runtime이라는 걸 가지고 있대 아까 우리 페이지에서 난 오류이다.

 

설치: npm install @babel/polyfill

그리고 webpack.config.js에서 저 부분을 저렇게 바꾸어 준다.

webpack의 환경설정을 했으므로 연결을 끊은다음 다시 npm run dev:assets를 해보면 정상 작동 한다.

 

EvalError: unsafe-eval 어쩌고 에러 해결하기

 

그런데 나는 이런 에러가 뜬다.

이거는 webpack.config.js의 config 설정에 devtool: "cheap-module-source-map"을 추가한 다음 웹팩 터미널 종료 후 다시 실행하면 없어진다.

 

const config = {

  entry: ["@babel/polyfill",ENTRY_FILE],

  devtool: "cheap-module-source-map",

↑ webpack.config.js