웹팩의 기본 개념

Webpack  · 

프레임 워크 팀이 아니라면 처음에 웹팩이라는 것에 대해 지나칠 수 있다.(사실 나도 초반에는 그냥 지나감…) 이번 포스트에서는 웹팩의 필수 개념에 대해 알아보고, 다음 포스트에서 실습을 통해 배워보자.

1. 웹팩이 필요한 이유

1.1 웹팩 이전의 세계와 모듈의 개념
var word  = 'Hello’;

var word  = 'World’;

<html>
    <head>
        <script src="./source/hello.js"></script>
        <script src="./source/world.js"></script>
    </head>
    <body>
        <h1>hello, world</h1>
        <script>
            console.log(word);
        </script>
    </body>
<html>
1.2 모듈의 등장
<html>
    <head>
        <!-- <script src="./source/hello.js"></script>
        <script src="./source/world.js"></script> -->
    </head>
    <body>
        <h1>hello, world</h1>
        <script type="module">
            import hello_word from "./source/hello.js";
            import world_word from "./source/world.js";
            console.log(hello_word);
            console.log(world_word);
        </script>
    </body>
<html>

var word  = 'Hello’;
export default word;

var word  = 'World’;
export default word;
1.3 모듈이란
번들링이란

2. 웹팩

2.1 웹팩 설치
npm install -D webpack webpack-cli
2.2 웹팩의 3가지 필수 옵션
node_modules/.bin/webpack --help

--mode : Enable production optimizations or development hints.
[선택: "development", "production", "none"]
-- entry : The entry point(s) of the compilation.
-- output : The output path and file for compilation assets
-- config : Path to the config file
[문자열] [기본: webpack.config.js or webpackfile.js]
...
...
2.3 로더
module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            }
          ]
    },

끝!