webpack

Jayden ·2022년 11월 20일
0

1. webpack

1) Webpack 이란?

  • 현대 자바스크립트 개발에서 모듈을 사용하는 것은 필수
  • 모든 브라우저가 ES2015 모듈을 지원하지 않으므로, 모듈 단위로 패키지를 관리할 수 없음
  • 번들러를 사용하면 모듈 지원이 불가한 브라우저에서의 의존성 관리 문제를 해결
  • webpack은 가장 많이 사용되는 번들러 중 하나로서 CommonJS, AMD, ES2015 모듈 포맷을 모두 지원, 여러 자원에 대한 의존성을 함께 관리
  • Loader와 Plugin을 통해 번들링외 다양한 기능 제공

2) 설치 및 사용

  • webpack / webpack-cli 설치
$ npm install -D webpack webpack-cli
  • webpack-cli 프로젝트 구성을 위한 여러 CLI 명령어 제공, webpack 명령어로 번들링 실행
$ webpack
  • 일반적으로 webpack.config.js 파일을 작성하여 설정, 다른 이름의 설정 파일 사용시 CLI --config 옵션에 사용할 설정파일 명시
$ webpack --config prod.config.js

3) entry와 output

  • webpack은 모든 것을 모듈로 다룸.
  • 자바스크립트 뿐 아니라 CSS, 이미지와 같은 리소스 모두 모듈로 로딩하여 사용
  • 이 작업은 webpack, Loader를 통해 이루어짐

  • 모듈간의 의존성에는 시작점이 존재 webpack에서는 그 지점을 entry로 설정한다. 그리고 번들링의 결과가 저장될 파일의 경로나 파일명은 output 옵션으로 설정
  • webpack은 entry 옵션에 설정된 파일을 기점으로 여러 파일(모듈)을 분석하여 의존성 그래프를 만듭니다. 그리고 이 그래프를 따라 파일들을 모듈 형태로 엮어 번들링을 진행
module.exports={
	entry: './src/js/main.js'
}
module.exports={
	entry: './src/js/main.js'
    articles :'./src/js/article.js'
}
// 혹은
entry : ['./src/js/main.js','/src/js/article.js']
  • output 옵션을 설정하면 번들링 결과과 저장될 경로를 지정할 수 있다. entry의 경우 여러개의 진입정을 정해줄 수 있었지만, output의 경우 하나만 지정할 수 있다.
module.exports={
	output:{
    	filename:'bundle.js'
    }
}

-path 옵션을 통해 저장될 파일의 경로도 지정할 수 있다.

module.exports={
  entry : 
  output:{
    	path : path.resolve(process.cwd(), 'dist'),
  		filename:'bundle.js'
    },
}
//process.cwd()는 현재 프로세스가 실행되고 있는 경로를 나타내며 path.resolve()는 인자로 넘어온 경로를 조합하는 역할을 수행. 두 가지 모두 Node.js에서 자주 사용되는 API

(참고하기 ) : http://daplus.net/node-js-process-cwd-%EC%99%80-__dirname%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C/

module.exports={
  entry : 
  output:{
    	path : path.resolve(process.cwd(), 'dist'),
  		filename:'bundle.js'
    },
}

css의 캐싱문제로 빌드시마다 cs파일의 내용이 수정되어도 항상 동일한 파일명(main.css)으로 생성되기 때문에 브라우저에서 동일한 파일로 인식하여 캐싱된 css파일을 불러오는 문제가 발생할 수 있다. 그래서 캐싱문제를 해결하기 위해 번들 결과시에 생성되는 파일명을 설정할 수 있다.

다음과 같이 src 디렉토리에 3개의 파일이 있다고 가정해보자. (index.js, index.css,vendors.js)

Entry Points를 활용하여 index와 vendors라는 이름을 가진 두 개의 chunk로 분리하고자 설정하였으며 css파일의 경우 따로 파일을 분리하고자 MiniCssExtractPlugin를 사용하였지만 index.js 와 index.css는 동일한 chunk로 생각할 수 있다.

// webpack 설정 내용

entry: {
  index: ["./src/index.js", "./src/index.css"],
  vendors: ["./src/vendors.js"]
},
output: {
  filename: "[name].[어떤옵션일지].js"
}
plugins: [
  new MiniCssExtractPlugin({
    filename: "[name].[어떤옵션일지].css"
  })
]
Chunk란 번들러에 의해 생성되는 하나의 코드 덩어리를 
Dynamic Import나 Entry Points 등을 활용하여 분리된 파일들을 의미한다.

(참조) : https://velog.io/@jiseong/Webpack-hash-chunkhash-%EA%B7%B8%EB%A6%AC%EA%B3%A0-contenthash-%EC%BA%90%EC%8B%B1%EC%A0%84%EB%9E%B5

2. Loader

  • webpack은 기본적으로 자바스크립트 파일과 JSON 파일 만을 이해한다. 하지만 Loader옵션을 사용하면 이미지나 CSS 파일을 모듈형태로 작성하여 가져올 수 있다.
  • 번들링 과정에서 Loader가 이러한 자원들을 자바스크립트로 변환해주기 때문이다.

먼저, npm 의존성을 설치한다.

$ npm install -D css-loader style-loader file-loader
module.exports = {
 	module : { 
  		rules : {
        	test:/\.css$/,
          	use : ['style-loader','css-loader'],
        		},
      			{
 					test : /\.(png|jpg|gif)$/i,
      				use : ['file-loader'],
       			},
        	],
        },
    }

test는 정규식 형태로 작성하며, use에 작성한 Loader는 왼쪽에서 오른쪽으로 순차적으로 실행
번들링을 다시 실행하면 성공적으로 번들 파일이 생성, 생성된 번들 파일에서 css 파일의 내용이 자바스크립트로 변환된다.

3. plugin

Loader가 특정 파일을 자바스크립트로 변환한다면 plugin은 더 광범위한 역할을 수행
plugin은 번들 파일이 생성되는 방식을 수정할 수도 있으며, 환경 변수 주입, 난독화 및 압축과 같은 작업을 수행

1) HtmlWebpackPlugin

  • HTML 파일에서 번들링 결과로 생성된 번들 파일을 사용하려면 <script> 태그를 사용하여 추가해야 한다.

  • 하지만 만약 번들 파일명에 hash 값이 포함되거나 파일명이 자주 변경된다면 매번 <script> 태그에서 파일명을 수정하기 번거롭다.

  • HTMLWebpackPlugin을 사용하면 이런 비효율적인 작업을 자동화 할 수 있다.

  • HtmlWebpackPlugin은 번들 파일을 포함하는 HTML 파일을 자동으로 생성해주고 번들 파일을 주입

의존성 설치

$ npm install -D html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 	plugins : [new HtmlWebpackPlugin()] 
}

HTML 파일에는 번들된 파일을 가져오는 <script> 태그가 자동으로 추가되어 있다.
기존에 존재하는 HTML 파일을 사용할 때는 다음과 같이 설정한다.

const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
	plugins : [
    	new HtmlWebpackPlugin({template : 'index.html'})  
    ]
}

template 옵션을 기존 HTML 파일로 설정한다면 해당 파일의 내용을 기준으로 HTML 파일을 생성하고 번들 파일을 주입해줌.

2) TerserPlugin

  • webpack의 일부 plugin은 추가 설치 없이 사용할 수 있다. 대표적인 예가 TerserPlugin이다.
  • Terserplugin은 terser라는 자바스크립트 파서이자 압축 도구를 이용해 자바스크립트 코드를 경향화해주는 plugin이다.
const TerserPlugin = require('html-webpack-plugin');


module.exports = {
	optimization : [
    	minimize : true,
        minimizer : [new TerserPlugin({extractComments: false})
    ]
}
  • MiniCssExtractPlugin : css 파일을 자바스크립트 번들에 포함하는 것이 아닌 별도의 css 파일로 분리해준다.

  • CssMinimizerPlugin : CSS 자원을 분석하여 최적화 및 최소화를 해주는 plugin이다.

  • CleanWebpackPlugin : output.path에 위치한 파일을 모두 제거. 이전의 번들 파일 결과를 삭제하기 위해 사용한다.

profile
J-SONE 프론트엔드 개발자

0개의 댓글