[Bundling] Webpack

daun·2022년 7월 25일

[기초지식]

목록 보기

18/25

디렉토리 생성
npm init
```
npm init -y
```
=> init 후 package.json이 나오면 성공!
파일 생성 및 연결
3-1) index.html
3-2) style.css
3-3) main.js
웹팩 설치하기
```
npm install -D webpack webpack-cli
```
=> package.json에 dependency 생기면 성공!

웹팩 config 파일 작성

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'), // './dist'의 절대 경로를 리턴합니다.
    filename: 'app.bundle.js',
  },
};

번들링하기
```
npx webpack
```

npm run build 설정하기

// package.json
{
  "name": "fe-sprint-webpack-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
        "build": "webpack", // here
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "devDependencies": {
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  }
}

CSS 연결하기
8-1) dist 파일내 css작성 및 연결

<!-- dist/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css"> //css 연결
  <title>Shout Lorem Ipsum Once</title>
</head>
<body>
  <main>
    <h1>Shout Lorem Ipsum Once</h1>
    <div id="app"></div>
  </main>
  <script src="app.bundle.js"></script> //JS 연결
</body>
</html>

/* dist/style.css */  
 {
  box-sizing: border-box;
  border: 0;
  padding: 0;
  margin: 0;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

div.shout {
  padding: 12px;
  margin: 4px;
  border-radius: 8px;
  border: 0.5px solid gray;
}

9) loader
JS가 아닌 파일(CSS)파일을 다루기 위한 로더 설정이 필요
9-1) CSS를 위한 두개의 로더 설치

npm i -D css-loader style-loader

9-2) webpack.config.js 조정

// webpack.config.js
// path require 필수 ★
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.bundle.js",
  },
  module: {
    rules: [
      {
                // 파일명이 .css로 끝나는 모든 파일에 적용
        test: /\.css$/,
                // 배열 마지막 요소부터 오른쪽에서 왼쪽 순으로 적용
                // 먼저 css-loader가 적용되고, styled-loader가 적용되어야 한다.
                // 순서 주의!
        use: ["style-loader", "css-loader"],
                // loader가 node_modules 안의 있는 내용도 처리하기 때문에
                // node_modules는 제외해야 합니다
        exclude: /node_modules/,
      },
    ],
  },
};

9-3) 재 빌드

npm run build

=> 재 빌드 끝난 뒤,
dist/index.js 파일에서 CSS 연결 끊어도 브라우저상에서 CSS가 나오면 성공!

10) HTML도 번들에 포함하기
10-1) plugin 설치

npm i -D html-webpack-plugin

10-2) webpack.config.js에 플러그인 적용

const path = require("path");
// 플러그인 require 필수 ★
const HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "src", "index.html")
  })]
};

=> dist/index.html 파일이 생성되었따면 성공!

daun

Hello world!

이전 포스트

[Bundling] 번들링과 웹팩

다음 포스트

[Bundling] Webpack

[기초지식]

[Bundling] 번들링과 웹팩

[기초지식] TDD(Test-Driven-Development: 테스트 주도 개발)

0개의 댓글