번들러의 종결자 웹팩을 셋팅해보자!

여러 파일을 하나로 합쳐서, request를 최소화 시켜주고,

소스 파일의 변경 watch

babel, lint 와 같은 여러 플러그인과의 통합도 도와준다!

1
2
3
4
5
mkdir webpack-practice
cd webpack-practice
mkdir config dist src
npm init -y
npm i -g webpack@^3.8.1
  • src/main.js

웹팩을 적용할 main.js를 생성하자.

  • config 폴더에 webpack.dev.js를 생성
1
2
3
4
5
6
7
8
9
10
11
const path = require("path")

module.exports = {
  entry: {
      main: ["./src/main.js"]
  },
  output: {
    filename: "[name]-bundle.js",
    path: path.resolve(__dirname, "../dist")
  }
}

webpack –config=config/webpack.dev.js

그럼 dist에 main-bundle.js가 생성된다.

  • dist/index.html

해당 번들 js를 실행하는 html을 생성해준다.

1
2
3
4
<html>
    <h1>hello World!</h1>
    <script src="main-bundle.js"></script>
</html>

hot reload 적용

webpack-dev-server를 깔아서 리로딩을 적용시켜보자

npm i -g webpack-dev-server@^2.7.1

  • webpack.dev.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const path = require("path")

module.exports = {
  entry: {
      main: ["./src/main.js"]
  },
  output: {
    filename: "[name]-bundle.js",
    path: path.resolve(__dirname, "../dist")
  },
  devServer: {
    contentBase: "./dist",
    overlay: true // 오류내용을 화면에 보여주게 함.
  }
}

webpack –config=config/webpack.dev.js

  • main.js

CSS와 HTML 번들링

  • src/main.js
1
2
require("./main.css");
require("./index.html")
  • src/main.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
    margin: 0;
    background-color: #444;
}

h1 {
    height: 100vh;
    display: flex;
    color: white;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    text-shadow: 0 0 20px;
}
  • src/index.html

dist에 있던 html 도 src로 이동시킨다.

  • webpack-dev.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
const path = require("path")

module.exports = {
  entry: {
      main: ["./src/main.js"]
  },
  output: {
    filename: "[name]-bundle.js",
    path: path.resolve(__dirname, "../dist")
  },
  devServer: {
    contentBase: "./dist",
    overlay: true
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      },
      {
        test: /\.html$/,
        use: [
          { 
            loader: "file-loader",
            options: {
              name: "[name].html"
            }
          },
          { loader: "extract-loader" },
          { loader: "html-loader" }
        ]
      },
      {
        test: /\.(png|jpg|gif)$/, // 내친김에 이미지 까지 불러오자
        use: [
          {
            loader: "file-loader",
            options: {
              name: "images/[name].[ext]"
                // "images/[name]-[hash:8].[ext] 를 하면 이미지 이름에 해쉬를 적용할 수 있음!
            }
          }
        ]
      }
    ]
  }
}
  • src/images/이미지 하나를 복사하자

wget https://skout90.github.io/assets/images/favicon.png

  • src/index.html
1
2
3
4
5
6
7
8
9
<html>
    <body>
        <div class="profile">
            <img src="./images/favicon.png" alt="">
            <h1>hello World!</h1>
        </div>
        <script src="main-bundle.js"></script>
    </body>
</html>

webpack-dev-server –config=config/webpack.dev.js

cf) 매번 위 명령어를 입력하지 말고 package.json에 아래 명령어를 추가하고

npm run dev 또는 yarn dev로 짧게 명령어를 단축할 수 있다!

“scripts”: {

​ “dev”: “webpack-dev-server –config=config/webpack.dev.js”,

},

결과!

굳이 html에 css를 삽입할 필요 없이, 웹팩이 CSS를 읽어 html 파일에 삽입해준다!

Reference

https://www.udemy.com/webpack-beyond-the-basics