[Worksheet 220503] Webpack

방예서·2022년 5월 3일

Worksheet

목록 보기

27/47

Part 8. Bundler

Bundler?

JavaScript 번들러로 본 조선시대 붕당의 이해
[JavaScript] 번들러(Bundler)란?

많은 서드파티를 필요로 하는 복잡한 어플리케이션이라면 Webpack
최소한의 서드파티로 라이브러리를 만들고 싶다면 Rollup
복잡한 설정을 피하고 비교적 간단한 어플리케이션을 만들고 싶다면 Parcel

Webpack

프로젝트 생성

npm init -y
npm i -D webpack webpack-cli webpack-dev-server@next
package.json에 script 수정

  "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  }

dev: 개발용
build: 제품화

parcel은 자동화 되어있었는데 webpack은 구성 옵션 등을 직접 지정해주어야한다.

webpack.config.js 파일 생성

entry, output

webpack.config.js 에서 ...


// export
module.exports = {
  //파일을 읽어들이기 시작하는 진입점 설정
  entry: './js/main.js',
  output: {
    //path와 filename 없어도 자동으로 생성되는 것 있다.
    path: path.resolve(__dirname, 'public'), //node.js에서 필요로 하는 절대경로로! 반환될 directory
    filename: 'app.js', //만들어질 파일의 이름
    clean: true //원래 있던 파일 삭제 후 만들어라
  }
}

entry
: 파일을 읽어들이기 시작하는 진입점 설정
parcel은 진입점을 index.html로 설정해주었었다.
webpack은 js파일을 진입점으로 설정한다.
output
: 결과물 반환 옵션
- path
  반환될 디렉토리. node.js에서 필요로 하는 절대경로로 지정해주어야 한다.
  절대경로 지정을 위해 path를 import했다.
- filename
  반환될 파일의 이름.
- clean
  반환될 때 리셋하기.

Plugins

//import
const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');
const { Template } = require('webpack');

// export
module.exports = {
  entry: './js/main.js',

  //결과물(번들)을 반환하는 방식
  output: {
    //path와 filename 없어도 자동으로 생성되는 것 있다.
    path: path.resolve(__dirname, 'public'), //node.js에서 필요로 하는 절대경로로! 반환될 directory
    filename: 'app.js', //만들어질 파일의 이름
    clean: true //원래 있던 파일 삭제 후 만들어라
  },

  //번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
  plugins: [
    new HtmlPlugin ({
      template: './index.html'
    })
  ],

  devServer: {
    host: 'localhost'
  }
}

번들링 후 결과물 처리 방식 등 다양한 플러그인들을 설정할 수 있다.
HtmlPlugin 설치 후 사용했다.

정적 파일 연결

우리 프로젝트에서 static 폴더를 추가했다.
그리고 html 파일에서 정적 파일(이미지)를 보여주기 위해

<img src="./images/logo.png" alt="logo">

해당 내용을 추가했다.

사실 저 이미지는 static이라는 폴더 안에 있는 것인데 ./ 만으로 어떻게 찾아지게 할 것인가?
index.html 에서는 ./static/images/logo.png 라고 명시해주어야 제대로 찾을 수 있는데 ...
실행 시켜서 output(index.html 등)이 dist라는 폴더 안으로 들어가면 static이라는 폴더는 dist 기준 자신 주변에 있기 때문에 ./static은 생략하고 ./로도 찾아질 수 있다.

이것을 지정해주기 위해 필요한 plugin copy-webpack-plugin 설치했다.


  plugins: [
    new HtmlPlugin ({
      template: './index.html'
    }),
    new CopyPlugin ({ // 어디에서부터 내용을 복사해서 dist 폴더에 넣을 수 있게 한다.
      patterns: [
        { from: 'static' }
      ]
    })
  ]

static 폴더로부터 모든 내용을 복사해서 output에 넣을 수 있게 한다.

이 과정에서 npm run build 시

[webpack-cli] HookWebpackError: Not supported

이런 오류가 나타나서 찾아보니 node의 버전이 12.20 보다 낮으면 발생하는 것 같다.
저번에 node.js 실습하면서 12.14.1 로 바꿔놨었기 때문에 깔려있는 것 중에 12.20보다 높은 것을 사용하니 해결되었다.

module

static 내부에 css 만들기

스타일 적용하기 위해 html 파일에

<link rel="stylesheet" href="./css/main.css">

명시해주는데, 우린 이전에 copy 플러그인을 사용했으니 css 폴더와 파일을 static 폴더 안에 만들어주면 사용할 수 있다.

js에 import 하기

css 폴더를 root 경로로 빼준다.
그리고 js 파일에 import '../css/main.css'; 를 명시해주면
* main.js는 js폴더 안에 있기 때문에 경로에서 ./이 아닌 ../ 으로 밖으로 나가라는 상대 경로를 입력해주자!

웹팩에서 진입점으로 main.js를 지정해주었기 때문에 js 파일을 읽으면 자동으로 css도 읽어지게 되고, 실행되면서 html까지 연결될 수 있다.
합쳐서 dist 라는 폴더에 내어주는 역할만 한다.

하지만! 이 방법은 웹팩 자체에서는 css 파일을 읽을 수가 없다.
-> css 파일을 읽을 수 있는 외부에 패키지를 설치해야한다.

npm i -D css-loader style-loader

설치 후 웹팩 옵션 추가해준다.

  module: {
    rules: [
      {
        test: /\.css$/, //.css로 끝나는 내용을 찾아 -> css 파일들 찾아라
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

SCSS

scss도 사용해주기 위해 필요한 패키지를 설치하자.

npm i -D sass-loader sass

moduel 부분에도 필요한 부분을 추가해주자.

  module: {
    rules: [
      {
        test: /\.s?css$/, //.css로 끝나는 내용을 찾아 -> css 파일들 찾아라
        //scss 이거나 css
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }

Autoprefixer(PostCSS)

설치

npm i -D postcss autoprefixer postcss-loader

webpack.config.js

  module: {
    rules: [
      {
        test: /\.s?css$/, //.css로 끝나는 내용을 찾아 -> css 파일들 찾아라
        // scss이거나 css
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  }

밑에서 위로 동작하기 때문에 use: 내부 순서가 중요하다.

sass-loader로 scss 파일을 해석하고,
postcss-loader로 공급업체 접두사를 적용하거나 그 외의 postcss 플러그인 사용하고,
css-loader로 내용을 css파일로 읽어들여서,
style-loader로 index.html에 style 태그로 만들어준다.

package.json

  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]

가장 밑에 추가한다.

.postcssrc.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

해당 파일 만들어서 추가한다.

잘 적용되었다.

babel

설치

npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime

.babelrc.js

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    ['@babel/plugin-transform-runtime']
  ]
}

webpack.config.js

module rules 내부에 css-loader 다음에 새로운 rule 만들어준다.

    rules: [
      {
        test: /\.s?css$/, //.css로 끝나는 내용을 찾아 -> css 파일들 찾아라
        // scss이거나 css
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.js$/,
        use: [
          'babel-loader'
        ]
      }
    ]