[TIL] 220503 webpack

koseony·2022년 5월 3일

TIL webpack

TIL(Today I Learn)

목록 보기

11/19

Webpack Bundler

1. 설치하기

원하는 디렉토리에 아래와 같은 코드 입력

npm init -y

package.json파일이 생성되면 성공

그 다음에 아래 코드로 설치

$ npm i -D webpack webpack-cli webpack-dev-server@next

2. 기본세팅하기

설치가 완료되면 package.json 수정
원래는 아래과 같이 되어 있다.

scripts부분은 아래와 같이 수정해준다.

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

index.html 만들기
index.html 을 새로 만든다.
js 폴더 만들고 main.js파일 만들기
webpack.config.js 파일 만들기
webpack은 서버를 열려면 구성파일이 필요하다
아래 이미지 처럼 webpack.config.js파일을 만들어준다.

webpack.config.js 구성하기
아래 코드과 같이 구성한다.

// import
const path =  require('path');

// export
module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: './js/main.js',

  // 결과물(번들)을 반환하는 설정
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  }
}

터미널로 테스트
npm run build를 입력하면 아래 이미치처럼 dist 폴더가 생성된다.

// import
const path = require('path');
// export
module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: './js/main.js',
  // 결과물(번들)을 반환하는 설정
  output: {
    // path: path.resolve(__dirname, 'dist'),
    // filename: 'main.js',
    clean: true
  }
}

위와 같이 path와 filename부분을 가려줘도
기본 폴더가 dist로 설정되어 있고 entry를 설정해줬기 때문에 제대로 추가가된다.

clean: ture를 주면 build할 때 필요 없는 파일들을 날려준다.

3. plugins

npm i -D html-webpack-plugin으로 플러그인 설치
그 다음에 webpack.config.js를 수정

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

// export
module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: './js/main.js',

  // 결과물(번들)을 반환하는 설정
  output: {
    // path: path.resolve(__dirname, 'dist'),
    // filename: 'main.js',
    clean: true
  },

  plugins: [
    new HtmlPlugin({
      template: './index.html'
    })
  ],

  devServer: {
    host: 'localhost'
  }
}

개발서버 띄우기
npm run dev로 개발서버 띄우기

제대로 동작한다.

4. 정적 파일 연결

아래 이미지와 같이 img태그의 경로를 설장하면 위치가 맞지 않아 찾지 못한다.

하지만 bundle해서 사용 가능하다 세팅해보자
터미널에 npm i -D copy-webpack-plugin를 입력해서 설치한다.

그리고 webpack.config.js 파일에 들어가서

// import
const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

import 부분에
const CopyPlugin = require('copy-webpack-plugin'); 를 추가하고
plugins 부분에

plugins: [
    new HtmlPlugin({
      template: './index.html'
    }),
    new CopyPlugin({
      patterns: [
        { from: 'static' }
      ]
    })
  ],

new CopyPlugin부분을 추가한다.

개발서버 열기
npm run dev를 해서 서버를 열어준다.

❗ [webpack-dev-middleware] HookWebpackError: Not supported 여기서 이런 에러가 발생했다 그래서 npm install copy-webpack-plugin@8 -D로 버전을 낮췄더니 해결되었다.

문제없이 잘 열렸다.

npm run build 해주기
npm run build을 해주면 아래 이미지처럼 dist 폴더가 제대로 구성된다.

5. module

스타일을 적용해보자
아래와 같이 static에 css폴더를 만들고 안에 main.css파일을 만든다.

css파일은 아래와 같이 입력해준다.

body{
	background-color: orange;
}

npm run dev를 입력해서 확인해보면

잘 적용되었다.

그런데 webpack에서는 다른 방법으로 css를 관리할수 있다.
실습해보자.

css 폴더 밖으로 빼기
css폴더를 아래 이미지와 같이 static 밖으로 빼준다.
main.js파일에서 import해주기
그다음 아래 이미지처럼 main.js에서 import해준다.

css읽는 패키지 설치
터미얼에서 npm i -D css-loader style-loader를 입력하여 패키지를 설치한다.
webpack.config.js 수정

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },

아래 이미지처럼 위의 코드를 입력해준다.

6. SCSS

SCSS 적용하기

scss로 바꾸기
기존의 css폴더와 main.css를 아래 이미지와 같이 SCSS폴더와 main.scss로 바꿔준다.
main.js 수정하기
아래 이미지처럼 import부분 수정한다.
webpack.config.js 수정하기
webpack.config.js파일의 test부분을
test: /\.s?css$/로 수정한다.

s? => s가 있을수도 있고 없을수도있다는 뜻

scss 패키지 설치하기
npm i -D sass-loader sass로 패키지 설치하고 webpack.config.js파일을 아래 이미지 처럼 수정

module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },

scss 파일 수정하기
아래처럼 scss파일 수정한다.

$color--black: #000;
$color--white: #fff;

body{
  background-color: $color--black;
  h1{
    color: $color--white;
    font-size: 40px;
  }
}

제대로 동작중!!

7. Autoprefixer

Autoprefixer 패키지 연결하기

scss를 수정해서 잘 동작하는지 확인하겠다.
아래 이미지처럼 display:flex를 추가한다.
패키지 설치
npm i -D postcss autoprefixer postcss-loader로 패키지 설치
webpack.config.js 수정하기
아래와 같이 수정한다. 순서가 중요하다
(아래것부터 실행)

module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },

package.json 파일 수정
아래와 같이 package.json파일에 추가해준다.

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

.postcssrs.js파일 만들기
루트경로에 .postcssrs.js파일을 만들어준다.

그리고 아래와 같이 코드를 입력한다.

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

개발서버 열고 확인하기
npm run dev로 서버를 열고 h1태그를 확인해보면 잘 적용되어있는걸 볼 수 있다.
마지막으로 index.html에 가서 사용하지 않는 링크 삭제
아래 이미지에 있는 link 태그는 이제 필요 없기 때문에 지워준다.

....
짠!

8. 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 수정하기
아래와 같이 수정

{
  test: /\.js$/,
  use: [
    'babel-loader'
  ]
}

$ npm i -D babel-loader로 패키지 설치

9. Netlify 배포

gitignore을 만들고 아래처럼 깃에 올리지 않을 파일들 설정
git 연결
git init으로 깃 연결하기
git status
git add
git commit
git remote 추가
git branch 추가 및 push
netlify 로그인

import an existing project 클릭

Github을 누른다.

자동으로 로그인 후에 아래에서 webpack-template-basic을 눌러준다.

아래 부분이 제대로 맞는지 확인

그리고 deploy site 버튼 클릭