간단한 webPack 사용법

거의 개인 메모용에 가까운 게시물입니다.. 자세한 설명은 아래 Reference의 원글을 참고해주세요.

---

1. node.js, npm이 설치되어 있다는 전제하에 실행된다.
   npm 설치 확인(버전 확인) :

    npm -v
   

   
   

2. npm init

   npm init
   //설정을 생략하고 싶으면 -y 옵션
   

   
   

3. 해당 폴더에서 webPack 설치

   npm i -D webpack webpack-cli
   

   i : install
   -D : developDependency

   
   

4. webpack 실행

   command 명령어로도 entry, output등의 param을 전달할 수 도 있지만 비효율적이다.
   webpack 실행 때 필요한 param을 저장한 webpack.config.js를 만들자

   npx webpack --config {webpack.config.js의 경로}
   

   
   

5. webpack.config.js의 예시

   더 세분화 된 옵션들은 webpack 공식문서를 참고하자

     //로컬 경로
     const path = require('path');
   
     module.exports = {
     mode: 'development',
     //시작점외 되는 js 파일
     entry: './js/main.js',
     //결과물
     output: {
         path: path.resolve(__dirname),
         filename: 'index.js',
     },
     //수정시 자동 업데이트 됨
     watch:true,
     module: { 
         rules:[
         { 
             //css 로더
             test: /\.css$/,
             use : ['style-loader','css-loader'] 
         } 
         ] 
     }
     };
   

   
   

6. CSS Loader 설치

   npm i style-loader css-loader -D
   

   
   

📚 Reference

웹팩5(Webpack) 설정하기