🥝 webpack 총정리 (+vue)

KHW·2021년 10월 4일

webpack 중요

Node.js

목록 보기

19/19

1. webpack

번들러 중 하나로 여러 파일을 압축해주는 번들링 역할을 하는 대상

웹팩 관련 다운할 것
1. webpack : core 패키지
2. webpack-cli : 터미널 동작 시킬 것
3. webpack-dev-server : 개발 서버 오픈용

🥝 관련 코드 사이트

사이트를 들어가면 기본적인 package.json부터 전부 작성되어있다.

2. 파일 분석하기

🥝 package.json

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --progress",
    "start": "webpack serve --progress"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.13.10",
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.10",
    "@vue/compiler-sfc": "^3.2.19",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^8.0.0",
    "core-js": "^3.9.1",
    "cross-env": "^7.0.3",
    "css-loader": "^5.1.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.0",
    "mini-css-extract-plugin": "^1.3.9",
    "node-sass": "^5.0.0",
    "sass-loader": "^11.0.1",
    "source-map-loader": "^2.0.1",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.1.1",
    "url-loader": "^4.1.1",
    "vue": "^3.2.19",
    "vue-loader": "^16.8.1",
    "webpack": "^5.24.3",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  }
}

babel부터 시작해서 css에 sass 그외에
html-webpack-plugin에 webpack관련도 준비되어있다.

webpack 관련

webpack
webpack-cli
webpack-dev-server

css sass 관련

style-loader
sass-loader
css-loader

html 관련

html-webpack-plugin

vue 관련

vue
vue-loader
@vue/compiler-sfc

🥝 webpack.config.js

웹팩 설정파일

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

const { VueLoaderPlugin } = require('vue-loader')

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

module.exports = {
	mode: webpackMode,
	resolve : {
		extensions : ['.vue', '.js'],
		alias : {
			'~' : path.resolve(__dirname , 'src')
		}
	},
	entry: {
		main: './src/main.js',
	},
	output: {
		path: path.resolve('./dist'),
		filename: '[name].js'
	},
	// es5로 빌드 해야 할 경우 주석 제거
	// 단, 이거 설정하면 webpack-dev-server 3번대 버전에서 live reloading 동작 안함
	// target: ['web', 'es5'],
	devServer: {
		overlay: true,
		stats: 'errors-only',
		liveReload: true
	},
	optimization: {
		minimizer: webpackMode === 'production' ? [
			new TerserPlugin({
				terserOptions: {
					compress: {
						drop_console: true
					}
				}
			})
		] : [],
		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,
				}
			},
			{
				test: /\.js$/,
				loader: 'babel-loader',
				exclude: /node_modules/
			},
			{
				test: /\.js$/,
				enforce: 'pre',
				use: ['source-map-loader'],
			},
			{
				test : /\.vue$/,
				use : 'vue-loader'
			}
		]
	},
	plugins: [
		new webpack.BannerPlugin({
			banner: `
				LICENSE.txt에 출력할 내용
			`
		}),
		new HtmlWebpackPlugin({
			template: './src/index.html',
			minify: process.env.NODE_ENV === 'production' ? {
				collapseWhitespace: true,
				removeComments: true,
			} : false
		}),
		new CleanWebpackPlugin(),
		...(process.env.NODE_ENV === 'production'
			? [new MiniCssExtractPlugin({ filename: '[name].css' })]
			: []
		),
		new VueLoaderPlugin(),
		// 빌드 될 js에 포함시키지 않고 그대로 가져와서 쓰는 파일은 아래처럼 설정하고, HTML에도 직접 넣어주세요
		// new CopyPlugin({
		// 	patterns: [
		// 		{ from: "./src/ext/modernizr.js", to: "./modernizr.js" },
		// 	],
		// })
	]
};

resolve

extensions를 통해 .vue나 .js의 뒤의 파일명을 생략할 수 있다.
alias를 통해 어떤 문자에 대해 path를 지정해 줄 수 있다.

entry

파일을 처리할 대상

output

파일을 처리해 출력할 위치(path)와 대상(filename)

module

어떠한 파일에 대해 어떠한 loader를 이용하여 처리할 지
test를 통해 파일명을 지정하고
loader나 use를 통해 해당 loader를 지정한다

plugin

webpack으로 변환한 파일에 추가적인 기능을 더하고 싶을 때 사용

3. vue css가 포함된 간단한 예시 실행하기

주의 : vue 관련 다운 받을 때
npm i -D vue@next vue-loader@next @vue/compiler-sfc
로 최신버전 @next를 사용해야한다.

🥝 파일 내용

index.html

main.css

main.js

App.vue

component/Btn.vue

🥝 파일 코드

1. index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

매우 간단하게 app id를 가진 div태그만 존재

2. main.css

.name{
    background-color:orange;
    width:300px;
    height:100px;
}

name class를 가진 대상에 속성을 처리

3. main.js

import './main.css';
import {createApp} from 'vue'
import App from '~/App'
//전역등록
import Btn from '~/component/Btn'

const app = createApp(App)
app.component('Btn',Btn)
app.mount('#app')

주요내용들이 담아오는 곳으로
css도 처리하고 vue와 App및 App에 담을 Btn도 존재한다.

4. App.vue

<template>
    <div
            class="name"
            @click="updateName"
    >
        {{ name }}
    </div>
    <Btn></Btn>
</template>

<script>
  import {ref} from 'vue';
  export default{
    setup(){
      const name = ref('Kossie Coder1');

      const updateName = () => {
        name.value = 'Kossie Coder'
      }
      return {
        name,
        updateName
      }
    }
  }
</script>

Kossie Coder1이 처음 출력되면서 클릭시 Kossie Code로 바뀌는 역할을 한다.
Btn 버튼이 추가되게 만드는 역할

5. component/Btn.vue

<template>
    <button @click="log">
        Click me!
    </button>
</template>

<script>
  export default {
    methods:{
      log(){
        console.log('Click')
      }
    }
  }
</script>

click 버튼을 누르면 콘솔에 출력하는 역할

🥝 파일 결과 처리하기

  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --progress",
    "start": "webpack serve --progress"
  }

npm run start

개발 환경 실행

npm run build

서버에 업로드할 폴더안의 파일 생성

결과는 npm run dev와 같다

4. 추가적인 내용

🥝 webpack.config.js의 module과 plugin 차이

module

파일을 해석하고 변환하는 과정에 관여하여 모듈을 처리
plugin

번들된 결과물을 처리
ex) 번들된 js를 난독화 하거나 특정 텍스트를 추출하는 용도 등
해당 결과물의 형태를 바꾸는 역할을 하므로 번들링된 파일을 처리

babel에 webpack을 사용하는 이유

babel을 통해 만들어진 js는 require를 이용하여 브라우저에서 적용될수 없다.
이를 해결하기 위해서 webpack을 설치하고 webpack에 babel-loader한 후 개발서버로 처리하거나 번들러로 build를 하여 브라우저에서 동작하게 만드는 역할을 webpack이 담당한다.

5. 출처

웹팩

KHW

나의 하루를 가능한 기억하고 즐기고 후회하지말자

이전 포스트

🥝 webpack 총정리 (+vue)

Node.js

1. webpack

🥝 관련 코드 사이트

2. 파일 분석하기

🥝 package.json

webpack 관련

css sass 관련

html 관련

vue 관련

🥝 webpack.config.js

resolve

entry

output

module

plugin

3. vue css가 포함된 간단한 예시 실행하기

🥝 파일 내용

🥝 파일 코드

1. index.html

2. main.css

3. main.js

4. App.vue

5. component/Btn.vue

🥝 파일 결과 처리하기

npm run start

npm run build

4. 추가적인 내용

🥝 webpack.config.js의 module과 plugin 차이

babel에 webpack을 사용하는 이유

5. 출처

stylelint 다루기

0개의 댓글