webpack5 default setting(웹팩5 Webpack)

👏webpack5 default setting(웹팩5 Webpack)

안녕하세요 오늘은 webpack5 default setting에 관해서 이야기를 해보도록 하겠습니다.

webpack5-default-setting-project은
html, css | scss, js, imgs, fonts 들을 모듈 형식으로 작업을 진행하고,
최종 파일을 min 파일로 압축시켜 배포할 수 있는 구조로써 프로젝트를 매번 새롭게 진행할 때
FE 개발자가 기본으로 세팅해야 하는 번거로움을 주리고자 만들었습니다.

✅반드시 확인해주세요!

현재 시점(2022년 1월 중순)에는 해당 setting 환경이 매우 잘 동작합니다.
하지만 시간이 어느정도 지나면 외부 모듈들은 버전이 변경될수 있으므로 내부 코드도 같이 변경이 됩니다.
그래서 필수로 확인해야 하는 부부은 아래 GitHub 링크에서 package.json 파일과, yarn.lock 파일 두 개를 작업하고자 하는 디렉토리에 다운로드를 받으셔서 yarn install를 진행 하면 됩니다.

GitHub - younhoso/webpack5-default-setting

 

// webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

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

module.exports = {
	mode: webpackMode,
	resolve: {
		extensions: ['.js', '.css', '.scss'], // 이는 사용자가 import 할 때 확장자를 생략 할 수 있도록 합니다.
		alias: { // 일반적으로 사용되는 src/ 폴더의 별칭을 '@'로 지정할 수 있습니다.
		  '@': path.resolve(__dirname, 'src'),
		},
	},
	entry: {
		main: './src/app.js',
	},
	devServer: {
		liveReload: true
	},
	optimization: {
		minimizer: webpackMode === 'production' ? [
			new TerserPlugin({ //빌드할때 소스코드 압축해줌.
				terserOptions: {
					compress: {
						drop_console: true
					}
				}
			})
		] : [],
		splitChunks: { // 중복된 모듈을 없에주는 옵션
			chunks: 'all'
		}
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				loader: 'babel-loader',
				exclude: /node_modules/
			},
			{ // images loader
				test: /\.(png|svg|jpg|jpeg|gif)$/i,
				type: 'asset/resource',
				generator: {
					filename: 'assets/images/[name][ext]',
				},
			},
			{ // fonts loader
				test: /.(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
				type: 'asset/resource',
				generator: {
					filename: 'assets/fonts/[name][ext]',
				},
			},
			{  // css 또는 scss loader
				test: /\.s[ac]ss|css$/i,
				exclude: /node_modules/,
				use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
			},
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
			minify: process.env.NODE_ENV === 'production' ? {
				collapseWhitespace: true,
				removeComments: true,
			} : false
		}),
		new MiniCssExtractPlugin({
			filename: "assets/[name].min.css",
		}),
		new CleanWebpackPlugin()
	],
	output: {
		filename: 'assets/[name].min.js',
		path: path.resolve(__dirname, './dist/')
	},
};

 

👏최종 정리

설정 항목을 최종 정리해보면 다음과 같습니다.

설정	용도
entry	입력 파일 경로
output	출력 디렉터리와 파일 이름
module	rules 로더 등록
plugins	플러그인 등록