• 언젠가 해야할 일...

Webpack 의 모든것 (탄생 과정, 사용법, 예제, config)

Webpack

• 웹팩이 뭐다? 번들러다.

Entry

• 다운받는 html파일이 index/eventList 두 개 이므로 entry도 두 개를 생성합니다.

  entry: {
      index: './src/javascripts/entry/index.js',
      eventList: './src/javascripts/entry/eventList.js',
    },
  

• entry (src/javascripts/entry)

  import '../header/adjustNameSize.js';
  import '../header/userDropDown.js';
  import '../nav/navToggle.js';
  import '../eventList/renderEventListPage.js';
  import '../eventDetail/clickEventDetails.js';
  import '../eventDetail/clickMyEventOrCancelButton.js';
  import '../eventForm/checkTime.js';
  import '../eventForm/clickNewEventButton.js';
  import '../eventForm/eventFormDisplay.js';
  import '../eventPromotion/clickExitPromotion.js';
  import '../eventPromotion/clickCopyPromotion.js';
  import '../eventForm/addListenersForBorderColor.js';
  import '../header/hoverTodayButton.js';
  

  import '../header/adjustNameSize.js';
  import '../header/userDropDown.js';
  import '../nav/navToggle.js';
  import '../nav/initCheckboxes.js';
  import '../calendar/month/generateMonth.js';
  import '../calendar/month/clickToday.js';
  import '../calendar/month/changeMonth.js';
  import '../nav/categoryFilterHandler.js';
  import '../nav/tabSelectHandler.js';
  import '../calendar/month/resizeHandler.js';
  import '../eventInfo/eventInfo.js';
  import '../eventDetail/clickEventDetails.js';
  import '../eventDetail/clickMyEventOrCancelButton.js';
  import '../eventForm/checkTime.js';
  import '../eventForm/clickNewEventButton.js';
  import '../eventForm/eventFormDisplay.js';
  import '../eventPromotion/clickExitPromotion.js';
  import '../eventPromotion/clickCopyPromotion.js';
  import '../eventForm/addListenersForBorderColor.js';
  import '../header/hoverTodayButton.js';
  

output

• ejs에서 사용 가능하도록 public/javascripts 에 name 별로 저장합니다.

  output: {
      path: path.resolve(__dirname, 'public/javascripts'),
      filename: '[name]_bundle.js',
    },
  

  • index_bundle.js 및 eventList_bundle.js 가 output으로 생성됨.

Run

npx webpack