webpack 공부 시작

SEO 이슈로 인해 모든 웹페이지에 대한 속도 이슈가 발생해서 사용하지 않는 CSS/JS 를 제거 하고 Minify 해야하는 상황이다. 

막연하게 webpack이 이 문제를 해결해 줄것 같은 희망에 이렇게 시작한다. 

이미 몇개의 유튜브 동영상을 찾아보고 따라해봤는데  여전히 현재 Node + EJS 로 되어있는 페이지를 

어떻게 적용하면 원하는 결과를 얻을수 있을지 잘 모르겠다. ㅠㅠ 

자 일단 이것 부터 차근차근보자 
https://www.youtube.com/watch?v=3On5Z0gjf4U

동영상은 10개 짜리지만  익숙해지는데에는 5~6일 걸린다고 한다.  웹팩이 어렵다고 하는데 

정말 5~6일 해서 익숙해지면 좋것다. 

 

1. 난 ejs 를 사용하는중이다. 따라서 EJS 의 include 에 대한 처리가 필요하다  

   결론 : 이것저것 시도 해봤지만 그냥 EJS 구문은 그냥 무시하고 
   기존처럼 서버 렌터링 타이밍에 해석되도록 그냥 두는게 나은것 같다 

2.  그럼 EJS 에 대한 output 경로와  js 에 대한  output 경로가 달랐으면 좋겠다  예를들어 처리된  index.html 은 views/ 아래 ,   index.js 는  public/dist 아래에 

 결론 :  이렇게 지정하니 해결 됨.

  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "public/dist")
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject : "body",      // HTML body 태그 하단에 위치하도록 지정 
      template: "./src/template.ejs",
      filename: "../../views/[name].bundle.ejs"
    })
  ],

 

3. 막상 해보니 ejs 파일에  스크립트가 insert 될때 경로( src="../public/dist/... 이런식) 가 썩 맘에 들지 않는다 ,

결론 : 찾아보니  publicPath 란 녀석이 이 문제를 해결해준다  난 dist/ 로 설정되기를 희망하니 

 output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "public/dist"),
    publicPath: '/dist/'
  },

요롷게 셋팅하니 

원하는 대로 설정되었다. 

 

4. 이제 기존 util 처럼 사용하던 js 파일들을 모듈화 해야한다.

하지만 개념이 부족한것 같다. 공부시작! 
참고 :  모듈 내보내기

모듈 내보내고 가져오기

; 보다 보니  영상에서는 require 를 사용했는데  링크에서는 import 를 사용하고 있다. 
차이를 알아보니 require 는 node.js 에서 사용가능하고  import는 ES6 모듈이라고 한다.   require 는 파일 어디에서나 호출 가능하고 import 는 파일의 서두에서만 호출이 가능하다고 한다.  또한 import는  필요한 모듈만 선택적으로 불러올수 있어서 메모리를 아낄수 있다고 한다.   아! 그래서 링크에서  예제로 설명을 한게 딱 그거에 맞는 설명이였네 . 
차이 설명 링크 

클래스 처리하는 방법 

결론 : 일단 링크에서 처럼 기존 함수 선언들에 export 를 붙여두는 걸로 두는걸로 시작해보자.

5. 가급적 페이지를 최대한 가볍게 하기위해 JQuery 를 제거 해야한다. 

클래스 제어하기     사용자 함수처리 하기 

Ready 함수 

Running code when the document is ready

 

6. 이제 CSS 를 모듈화 해야하는데 에러나 나기 시작하고 있다. 

제길슨 이거 진짜 웹팩을 프로젝트 시작부터 고려하고 작업을 한게 아니고서는 정말 쉽지 않은것 같다. 

일단 발생한 문제는 css 파일내에서 참조하고 있는 이미지가 말썽인 상황.