프론트엔드 - webpack 설정하기

오늘은 webpack을 설정하는 방법을 알아보겠습니다.

 

webpack은 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러 개)의 파일로 번들링하는 모듈 번들러입니다.

webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요없습니다.

 

간단하게 webpack을 설치해봅시다.

다음과 같이 명령어를 입력하여 webpack을 설치합니다.

 

npm install --save-dev webpack webpack-cli

 

설치가 완료된 이후 package.json 파일에

webpack, webpack-cli가 설치됨을 알 수 있습니다.

 

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development --open --hot --stage development",
	"build": "babel src/index.js -w -d dist/js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.14.8",
    "@babel/core": "^7.15.0",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/plugin-transform-arrow-functions": "^7.14.5",
    "@babel/plugin-transform-template-literals": "^7.14.5",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.2.0",
    "html-webpack-plugin": "^4.4.0",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.2.1",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

 

webpack이 모듈을 번들링할 때 Babel을 사용하여 es6 문법의 코드를 es5로 트랜스파일링하도록 babel-loader를 설치해줍니다.

 

npm install --save-dev babel-loader

 

 

또한 webpack이 실행될 때 참조하는 파일을 만들어줘야 우리가 원하는 번들러를 만들 수 있습니다.

 

const path = require('path');
const webpack = require('webpack');
const dotenv = require('dotenv');
const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
	mode: 'development',
	entry: ['@babel/polyfill', './src/index'],
	resolve: {
		extensions: ['.jsx', '.js']
	},
	devServer: {
			contentBase: path.join(__dirname, 'dist'),
			historyApiFallback: true,
			inline: false,
			port: 3000,
			hot: true
		},

	output: {
			path: path.join(__dirname, 'dist'),
			publicPath: '/',
			filename: '[name].[hash].js'
		},

	module: {
		rules: [
				{
					test: /\.jsx?/,
					use: {
					loader: 'babel-loader',
					},
					exclude: /node_modules/,
				},
				{
					test: /\.s[ac]ss$/i,
					use: ['style-loader', 'css-loader', 'sass-loader'],
					exclude: /node_modules/,
				},
			],
		},
	
	plugins: [
		new HtmlWebpackPlugin({
			template: 'public/index.html',
		})
	]
}

 

 

1. mode 

   - mode는 development로 배포할 것인지 production모드로 배포할 것인지를 결정할 때 사용합니다.

   - 보통 개발할 때 사용하므로 development로 했다가 번들링할 파일만 production으로 옮길 때 production모드로 활용합니다.

 

2. entry 

   - 다른 모듈을 사용하고 있는 최상위 자바스크립트 파일이 어디에 있는지 표시하기 위해서 사용합니다.

   - 웹팩은 이 entry 속성에 명시된 파일을 기준으로 의존성 트리를 만들어 하나의 번들링 파일을 만들게 됩니다.

 

3. resolve

   - 확장자를 처리할 수 있게 해줍니다.

 

4. devServer 

   - contentBase: 정적파일을 제공할 경로

   - historyApiFallback : 히스토리 API를 사용하는 SPA 개발시 설정한다. 404가 발생하면 index.html로 리다이렉트한다.

   - port : webpack port 설정

   - inline : 작은 클라이언트 엔트리를 번들에 삽입해 페이지가 변경되면 새로고칩니다.

   - hot : 실시간 바로 업데이트를 하기 위해서 설정해줍니다.

 

5. output

   - 웹팩을 돌리고 난 후 결과물을 보여줍니다.
   - filename 속성은 웹팩으로 빌드한 파일의 이름이고, path 속성은 해당 파일의 경로입니다.

 

6. loader 

   - 자바스크립트가 아닌 자원을 모듈로 바꿔주기 위해서 사용합니다.

 

 

https://www.zerocho.com/category/Webpack/post/58aa916d745ca90018e5301d

(Webpack) 웹팩5(Webpack) 설정하기

 

https://jeonghwan-kim.github.io/js/2017/05/15/webpack.html

웹팩의 기본 개념