1 webpack 기본강의

source: categories/study/youtube-developers_quality/webpack.md

1.1 웹팩 기본강의

웹팩을 하기전에 우선 번들링(bundling)이란 개념을 알아야되는데, 번들링이란 우리가 개발한 파일을 하나로 합쳐주는 애를 번들러라고합니다.
꼭 자바스크립트 파일만이 아니고 HTML 파일이 될 수도 있고, 이미지가 될수도있고, CSS가 될수도있고
어쨌든 그런 파일들을 최적화를 하면서 압축을 해주면서 자바스크립트 파일은 하나로 합쳐준다던지
이런식으로 처리를 해주는 것을 번들링이라고 하는데, 그 번들링하는 툴을 번들러라고 부릅니다.

웹팩은 여러가지 번들러중 가장 인기있는 번들러입니다.

번들링한 파일들을 서버에올려서 배포하는 것이죠.
사용자가 사용하는 페이지들은 웹팩으로 번들링이 끝난 최종버전 파일이 되는 것입니다.

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CopyWebpackPlugin = require("copy-webpack-plugin");

const webpackMode = process.env.NODE_ENV || 'development';

module.exports = {
	mode: webpackMode,
	entry: {
		main: './src/main.js', // 빌드의 시작점
	},
	output: { // 최종 파일을 어디에다 생성할지를 정함
		path: path.resolve('./dist'),
		filename: '[name].js'
	},
	// es5로 빌드 해야 할 경우 주석 제거
	// 단, 이거 설정하면 webpack-dev-server 3번대 버전에서 live reloading 동작 안함
	// target: ['web', 'es5'],
	devServer: {
		liveReload: true
	},
	optimization: {
        // 파일 공백을 없애줌
		minimizer: webpackMode === 'production' ? [
			new TerserPlugin({
				terserOptions: {
					compress: {
						drop_console: true // console 코드를 지웁니다
					}
				}
			})
		] : [],
		splitChunks: {
			chunks: 'all'
		}
	},
	// externals: {
		// 빌드 과정에서 제외하고 그대로 사용할 패키지 지정
		// 예시 - foo라는 이름의 모듈이라면 아래처럼 입력
		// foo: "foo"
	// },
	module: {
		rules: [
            {
                test: /\.(css|scss)$/,
                use: [
                    process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader :
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]?[hash]',
                    limit: 10000, // 10kb 이하 파일은 그냥 이미지 파일을 쓰는게 아니라 Base64 포맷으로해서 이미지 자체를 데이터로 포함시키도록 처리
                                  // 그렇게하면 이미지가 외부에서 로드되는게 아니라 문서 자체의 데이터로 들어가있기 때문에 로딩시간이 단축된다.
                                  // 그래서 작은 아이콘 같은 경우에는 보통 이렇게 처리를 해준다.
                }
            },
			{
				test: /\.js$/,
				loader: 'babel-loader', // 최신 스펙으로 개발한 자바스크립트 파일을 인터넷 익스플로러 같은데서도, 구형 브라우저에서도 잘 돌아갈 수 있도록 예전 방식하고 호환되는 자바스크립트 코드로 변환해준다.
				exclude: /node_modules/
			},
			{
				test: /\.js$/,
				enforce: 'pre',
				use: ['source-map-loader'],
			}
		]
	},
	plugins: [
		new webpack.BannerPlugin({ // 라이센스 텍스트 파일에 라이센스 관련 정보를 출력
			banner: `
				LICENSE.txt에 출력할 내용
			`
		}),
		new HtmlWebpackPlugin({ // index.html을 컨트롤 - 공백없이 압축을 해준다던지 
			template: './src/index.html',
			minify: process.env.NODE_ENV === 'production' ? {
				collapseWhitespace: true,
				removeComments: true,
			} : false
		}),
		new CleanWebpackPlugin(), // 빌드를 할 때마다 배포용 파일이 dist 폴더에 생기는데 빌드할 때마다 일단 파일들을 싹 지워버리고 새로 만들도록 클린 작업을 해준다.
                                  // 그렇게 안하면 만약에 빌드를 잘못해서 원하지 않는 파일들이 생겼어. 그런데 그 다음에 다시 빌드를 하면 새로운 파일이 생기는데 이전에 생겼던 원하지않는 파일들도 그대로 남아있게된다.
                                  // 그래서 일부로 지워줘야되니까 귀찮기 때문에 이거를 같이 써주는 것.
		// CopyWebpackPlugin: 그대로 복사할 파일들
		new CopyWebpackPlugin({
			patterns: [
				{ from: "./src/main.css", to: "./main.css" },
				{ from: "./src/images", to: "./images" },
			],
		})
	]
};

babel.config.js

module.exports = {
	presets: [
		['@babel/preset-env', {
			targets: { // 타겟 브라우저의 버전을 숫자로 입력할 수 있다.
				chrome: '58',
				ie: '11',
			},
			useBuiltIns: 'usage',
			corejs: {
				version: 3,
			}
		}]
	]
};