[Chrome Extension] Webpack 적용 방법

모듈 bundling의 개념을 가진 webpack은 다양한 프로젝트 부분에서 좀 더 편하게 코딩하도록 도와준다. chrome extension 또한 어느 분이 chrome extension webpack을 올려주셨는데 실제로 사용해보니 너무 편해서 포스팅을 한다. chrome extension의 경우 가장 핵심인 manifest.json을 필두로 여기에 등록된 resources로만 접근하여 앱을 실행하는데 이걸 등록하고 일일히 설정하는것이 여간 힘든일이 아니다.

 

chrome extension webpack은 이러한 어려운 부분들을 해소시켜 주는데 여러 파일을 만들어도 build시 한 파일로 모아지기 때문에 manifest.json에는 최종 결과 파일 하나만 등록시키면 된다는 장점이 있다.

chrom extension webpack 적용법

chrome extension CLI 주소

https://github.com/dutiyesh/chrome-extension-cli

 

GitHub - dutiyesh/chrome-extension-cli: 🚀 The CLI for your next Chrome Extension

 

 

Chrome extension 빌드 방법

npm install -g chrome-extension-cli
chrome-extension-cli my-extension

npm run build

 

먼저 해당 chrome-extension-cli를 npm으로 설치한 후에 manifest.json만 설정해주고 npm run build를 통해 최종 build 파일만 뽑아 chrome extension 앱으로 등록시키면 된다.

 

Chrome extension CLI 구조

my-extension
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── config                    // Webpack with minimal configurations
│   ├── paths.js
│   ├── webpack.common.js
│   └── webpack.config.js
├── public
│   ├── icons
│   │   ├── icon_16.png
│   │   ├── icon_32.png
│   │   ├── icon_48.png
│   │   ├── icon_128.png
│   ├── *.html                // HTML files will vary depending on extension type
│   └── manifest.json
└── src
    ├── *.css                 // CSS files will vary depending on extension type
    └── *.js                  // JS files will vary depending on extension type

나같은 경우 주로 resources 느낌이 나는 것들은 public에 놔두고 핵심 js 코드는 src에 두었다. 이를 취합하여 webpack.common.js와 webpack.config.js를 각자 커스텀한 경로로 잘 설정만 해두면 된다.