웹팩 설정하기

크롬 익스텐션을 개발할 때 boliler plate를 사용하여 개발했었다.

그러다 보니 개발환경에 변경하고 싶은 부분이 있을 때 웹팩을 수정해야하는 경우가 발생했다.

하지만 웹팩에 대해 아는 것이 없어서 설정을 건드릴 수가 없었다.

그래서 웹팩과 그 외의 개발환경을 셋팅하는 방법에 대해서 정리하고, 실제 적용까지 해볼 예정이다!

jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html

프론트엔드 개발환경의 이해: 웹팩(기본)

이 블로그에 웹팩 설정과 관련한 자세한 설명이 되어있어서, 블로그를 보며 공부한 내용을 정리하였다.

 

🎇 웹팩

모듈을 지원하지 않는 인터넷익스플로어와 같은 브라우저에서도 코드가 잘 동작할 수 있도록 해주는 것이다.

웹팩은 여러 개의 파일을 하나의 파일로 만들어주는 번들러 역할을 수행한다. 

webpack 공식 사이트 이미지

js 파일 뿐만 아니라 이미지 파일, sass 파일들도 모듈로 인식하기 때문에 이미지 파일을 import하면 모듈로서 가져올 수 있다.

이 이미지에서 제일 처음에 시작하는 .js 파일이 바로 엔트리(entry)이다.

CRA를 사용하여 만든 리액트 프로젝트를 생각하면 index.js가 바로 엔트리가 될 것이다.

엔트리에서 부터 사용되는 모듈들을 찾아서 웹팩은 하나의 파일로 만들어주는데, 이렇게 나온 파일이 바로 아웃풋(output)이다.

 

웹팩에서는 이 entry와 output을 설정할 수 있다.

먼저 프로젝트 폴더안에 webpack.config.js 파일을 생성한다.

이 파일의 내용은 다음과 같다.

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/app.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve('./dist'),
    }
}

node 기반이기 때문에 모듈을 export 하기 위해 module.exports를 사용하였다.

mode는 'development', 'production', 'none' 중에 하나를 택할 수 있다.

웹팩에서 'name'은 파일 이름, 'ext'는 확장자를 의미한다. 

'[name]'에는 entry point에서 설정한 값인 'main'이 들어갈 것이다.

filename: 'main.js'

라고 하지 않는 이유는 상황에 따라 entry point가 여러 개가 될 수 있기 때문이다.

output을 설정하는 부분에서는 생성된 파일을 dist라는 폴더에 넣는 설정을 한다.

이때 폴더 경로를 절대경로로 사용해야하기 때문에 path.resolve라는 라이브러리를 사용하였다.

 

이렇게 한 후에 index.html 파일의 body 부분에

<script src="./dist/main.js"/>

를 추가해주면 추가적으로 모듈을 추가해주지 않아도 알아서 사용된 모든 모듈이 불러오게 된다.

 

그리고 package.json 파일에서 

{
	"scripts": {
		"build": "webpack"
	},
}

이렇게 build 설정을 한 뒤에 npm run build 를 하게 되면 

다음과 같이 dist 폴더안에 main.js 라는 파일이 생성된다.

*package.json파일이 없다면?

package.json 파일이 아직 없다면 터미널 창에 'npm init' 명령어를 치면 된다.

그러면 package name, version, description, entry point 등 셋팅해야할 여러 가지가 나오는데, 각 항목에 맞는 값을 입력해주면 된다.

아무것도 입력하지 않고 엔터키를 누르면 default값이 설정된다.

 

 

🔧 로더

각 파일들(이미지, 폰트, 스타일시트 등...)을 모듈로 개발할 수 있도록 지원해주는 것이다.

로더를 통해 웹팩은 모든 파일들을 모듈로 인식할 수 있다.

 

로더를 적용하는 방법은 다음과 같다

webpack.config.js 파일에서 다음과 같은 코드를 추가한다.

module.exports = {
    .....,
    module: {
        rules: [{
            test: /\.js$/, // .js 확장자로 끝나는 모든 파일
            use: [path.resolve('./customloader.js')] // 로더 적용
        }]
    }
}

/\.js$/ 는 정규표현식을 사용한 부분으로, .js 확장자로 끝나는 모든 파일을 찾는다.

그리고 use에 있는 배열안의 값을 통해 customloader.js 이라는 로더를 적용한다.

 

주로 사용되는 로더는 다음과 같다.

 

1. css-loader

webpack.config.js 에 코드를 작성하기 전 npm i css-loader를 통해 모듈을 다운받아야 한다.

module.exports = {
    .....,
    module: {
        rules: [{
            test: /\.css$/, // .css 확장자로 끝나는 모든 파일
            use: ['css-loader'] // 로더 적용
        }]
    }
}

 

2. style-loader

css-loader를 사용하게 되면 css 파일이 js 코드로 변경이 될 뿐 스타일이 적용되지는 않는다.

따라서 style-loader가 필요하다.

webpack.config.js 에 코드를 작성하기 전 npm i style-loader를 통해 모듈을 다운받아야 한다.

module.exports = {
    .....,
    module: {
        rules: [{
            test: /\.css$/, // .css 확장자로 끝나는 모든 파일
            use: ['style-loader', 'css-loader'] // 로더 적용
        }]
    }
}

이때 반드시 style-loader를 css-loader보다 먼저 로더해야 한다.

 

3. file-loader

이미지 파일을 모듈로 인식하기 위해 필요하다.

webpack.config.js 에 코드를 작성하기 전 npm i file-loader를 통해 모듈을 다운받아야 한다.

module.exports = {
    .....,
    module: {
        rules: [{
            test: /\.png$/, // .png 확장자로 끝나는 모든 파일
            loader: 'file-loader' // 로더 적용
            options: {
            	publicPath: './dist', // output path 지정
                name: '[name].[ext]?[hash]', // 파일명 형식
            }
        }]
    }
}

 

4. url-loader

webpack.config.js 에 코드를 작성하기 전 npm i url-loader를 통해 모듈을 다운받아야 한다.

module.exports = {
    .....,
    module: {
        rules: [{
            test: /\.png$/, // .png 확장자로 끝나는 모든 파일
            loader: 'url-loader' // 로더 적용
            options: {
            	publicPath: './dist', // output path 지정
                name: '[name].[ext]?[hash]', // 파일명 형식
                limit: 5000 // 5kb 미만의 파일만 data url로 처리
            }
        }]
    }
}

options에서 limit 부분은 해당 값 미만의 크기를 가지는 파일에 대해서만 background 이미지를 생성하지 않고, data url로 처리하는 설정을 나타낸다.

data url로 처리된 이미지는 경로가 아닌 'data:image/png;base64,~' 형식으로 처리된다.

이렇게 이미지를 처리하게 되면 file-loader를 사용해서 이미지를 가져올 때보다 훨씬 빠른 속도로 렌더링할 수 있다.

프로젝트 개발할 때도 이걸 이용해서 작은 사이즈의 이미지들은 data url 형식으로 처리되도록 해야겠다.