웹팩의 주요 속성

entry

• output
• loader
• plugin

Entry

entry는 웹팩이 어떤 파일을 기반으로 변환을 할 것인지에 대한 진입점을 나타내는 속성을 의미한다.

//webpack.config.js
module.exports={
    entry: './src/index.js',
    output: {},
    module: {
        rules:[]
    },
    plugins: [],
    
}

 

 

Entry파일에 들어갈 내용

Entry파일에는 웹 어플리케이션의 전반적인 구조를 가지고 있어야 한다.

전반적인 구조가 있어야하는 이유는 이를 웹팩이 해당 구조에 따라 연동된 모듈들에 대해 파악할 수 있고

번들링 작업을 할 수 있기 때문이다.

 

App.tsx 파일에는 라우트 경로에 따른 컴포넌트 경로를 포함하고 있다. 따라서 전반적인 구조를 가지고 있다.

이를 감싸고 있는 client.tsx에 파일의 진입점에 해당된다.

module.exports={
    entry: './client.tsx',
}

//client.tsx
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from '@layouts/App/App';

render(
    <Router>
        <App />
    </Router>
    , document.querySelector('#app'));

//App.tsx
import loadable from '@loadable/component';
import Channel from '@pages/Channel';
import React, { FC } from 'react'
import { Route, Routes } from 'react-router';

const Login = loadable(() => import('@pages/Login'))
const SignUp = loadable(() => import('@pages/SignUp'))
const Workspace = loadable(() => import('@layouts/Workspace'))

const App: FC = () => {
    return (
        <Routes>
            <Route path="/" element={<Login />} />
            <Route path="/login" element={<Login />} />
            <Route path="/signup" element={<SignUp />} />
            <Route path="/workspace/:workspace/*" element={<Workspace />} />
        </Routes>
    )
}

export default App

 

 

Output

Output은 entry의 파일에 대해 웹팩으로 변환한 결과물을 의미한다.

const path = require('path'); 

module.exports = {
	output: {
    	filename: app.js
    }
}

 

output에 대해 path 속성을 넣을 수 있다.

이 속성을 통해 변환한 결과물을 어느 곳에 반환할지 설정할 수 있다.

__dirname은 현재 실행하고 있는 파일 경로를 의미한다.

path.resolve()를 통해서 현재 실행하고 있는 파일 경로에 dist를 결합시켜서 경로 설정이 가능하다.

다음과 같이 표현하면 결과물의 filename을 설정할 수 있다.

const path = require('path');

module.exports = {
	entry: {
    	app: './index.js'
    },
    output: {
    	filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
}

 

결과물의 파일명 : app.js

 

 

Loader

로더는 JS파일이 아닌 다른 자원들(HTML,CSS,IMAGES,FONT) 등에 대해서 웹팩으로 변환하기 위해 사용하는 속성이다.

// app.js
import './common.css';

console.log('css loaded');

//common.css

p {
	color: blue;
}

const path = require('path'); 
module.exports={
    entry: {bundle: './index.js'},
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ]
    },
    
}

loader는 module 안에 rules를 통해서 설정할 수가 있다.

test는 css확장자로 끝나는 모든 파일에 대해서 수행할 대상을 설정하는 것이다.

use는 test에 적용할 loader들을 설정할 수 가 있다.

 

주의해야할 점은 loader는 오른쪽부터 왼쪽으로 적용되기 때문에 순서를 잘 고려해야할 필요가 있다.

 

loader에 추가적인 옵션을 주고 싶다면

아래와 같이 나타낼 수가 있다.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // [style-loader](/loaders/style-loader)
          { loader: 'style-loader' },
          // [css-loader](/loaders/css-loader)
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          // [sass-loader](/loaders/sass-loader)
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
};

 

 

Plugin

loader는 JS파일이 아닌 자원들에 대해서 웹팩으로 변환할 수 있다. 즉 변환의 중간과정에 개입하는 형태이다.

반면에 플러그인은 웹팩의 결과물의 형태를 바꾸는 역할을 한다.

 

plugins 배열 내부에는 객체 인스턴스 형태로만 작성해야한다.

// webpack.config.js

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

module.exports={
    entry: {bundle: './index.js'},
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ]
    },
    plugins:[
    	new HtmlWebpackPlugin(),
    	new webpack.ProgressPlugin()
    ],
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin()]
    }
    
}

 

 

다양한 플러그인들

HtmlWebpackPlugin : 웹팩으로 변환한 결과물의 HTML을 자동으로 생성해주는 플러그인

ProgressPlugin : 웹팩의 빌드 진행율을 보여주는 플러그인

UglifyJsPlugin : 웹팩의 빌드 결과물에 대한 난독화및 최적화 기능  => terser-webpack-plugin으로 대체

 

BundleAnalyzerPlugin: 번들링한 파일에 대해서 각 모듈들의 파일크기를 시각화 할 수 있다.
이를 통해 실수로 가져온 모듈들이 있는지, 실제 배포하기전에 최적화 할 대상 모듈들을 검출할 수 있다는 장점이 있다.

 

참고

https://joshua1988.github.io/webpack-guide/concepts/overview.html#%EC%9B%B9%ED%8C%A9%EC%9D%98-4%EA%B0%80%EC%A7%80-%EC%A3%BC%EC%9A%94-%EC%86%8D%EC%84%B1

https://webpack.js.org/plugins/