실습

설치

1. npm init -y
2. npm i -D webpack webpack-cli webpack-dev-server@next
   • webpack-cli 와 메이저 버전을 일치시켜 주어야 하기 때문에 webpack-dev-server뒤에 @next를 붙입니다.
   • webpack : 번들러
   • webpack-cli : webpack cli를 지원해줍니다.
   • webpack-dev-server : webpack을 통해서도 개발서버를 오픈할 수 있지만, 내용을 수정했을 때 내용을 바로 갱신해주지는 않습니다. 그래서 이 패키지를 설치하여 dev 명령어를 통해서 개발서버를 오픈할때, 페이지들을 바로바로 새로고침 해 줄 수 있습니다.
3. package.json에

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

   를 추가합니다.
4. index.html과 js폴더를 생성합니다.
5. webpack dev서버를 통해서 개발서버를 오픈하려면 parcel번들러와는 다르게 구성파일을 하나 제공해주어야 합니다.
   webpack.config.js파일을 최상위에 생성합니다.

webpack.config.js에 구성 옵션 추가

webpack.config.js는 브라우저에서 동작하는 것이 아니라 node.js환경에서 동작합니다.

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

// export
module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정
  //webpack은 js파일을 진입점으로 사용합니다.
  entry: './js/main.js',
  
  // 결과물(번들)을 반환하는 설정
  // path에는 node.js에서 필요로하는 절대경로가 필요합니다.
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    clean: true
  }
}

• path 라는 모듈은 node.js에서 기본적으로 제공하는 전역 모듈입니다.
• __dirname node.js에서 사용할 수 있는 전역변수입니다. 현재 파일이 있는 그 경로를 지칭합니다.
• path.resolve()첫번째 인수와 두번째 인수의 경로를 함쳐주는 역할을 합니다. 이 두 경로를 함쳐서 절대적인 경로를 반환합니다.
• filename: 'main.js' main.js라는 이름으로 번들을 만듭니다.
• clean: true는 매번 build할 때마다 빌드폴더 안의 기존의 빌드 내용을 전부 삭제하고 새롭게 만듭니다.(작업하던 js파일 이름을 바꾸게 됐을 때 유용합니다.)

디렉토리 구조

npm run build로 테스트

npm run build를 입력하여 성공적으로 build 됐는지 dist폴더와 내용을 확인합니다.

html-webpack-plugin 설치 및 설정

build를 하면 지금은 main.js만 build됐는데요,
index.html을 삽입해서 개발서버를 열어 줄 수 있습니다.

npm i -D html-webpack-plugin

이제 이 패키지를 첨부하여 어디에서 실행할 것인지 명시를 해주어야 합니다.

webpack.config.js 파일에

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

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

를 추가합니다.

webpack은 entry에 있는 파일을 output 결과물로 만드는 과정에서 plugins에 명시되어져 있는 plugin들을 활용하게 됩니다. 그 때, 우리가 방금 작성한 HtmlPlugin 을 통해서 template으로 만들어 놓은 index.html을 main.js와 병합된 합본을 dist라는 폴더에 만들어주는 역할을 합니다.

devServer 옵션 설정

npm run dev로 서버를 열때 http://[::]:8080 으로 제대로 localhost가 표시되지 않을 때에는 webpack.config.js 에 devServer 옵션을 추가합니다.

  devServer: {
    host: 'localhost'
  }

copy-webpack-plugin

copy-webpack-plugin은 build시에 설정한 폴더 이름의 파일 안에 있는 내용을 그대로 복사 하여 dist폴더 안으로 넣어줍니다.

npm i -D copy-webpack-plugin 을 설치합니다.

webpack.config.js 에 옵션을 추가합니다.

	const CopyPlugin = require("copy-webpack-plugin");

    new CopyPlugin({
      patterns: [
        {from: 'static'}
      ]
    })

• npm run build 명령어로 잘 동작하는지 확인합니다.

css 파일 추가해보기

main.js 에 import로 추가합니다.

import css from '../css/main.css';

css 변수를 활용하지 않기 때문에 css from 은 생략가능합니다.

import '../css/main.css';

build하면 webpack bundler는 import한 파일들을 전부 main.js 파일 하나로 합쳐 줍니다.

하지만 webpack 자체로는 css파일을 읽을수가 없습니다. 단지 하나로 합치기만 할 뿐입니다. 그래서 css파일을 읽을 수 있는 외부 패키지를 설치해야 합니다.

여기까지 디렉토리 구조

css module 설치

webpack 자체로는 css파일을 읽을수가 없습니다. 단지 하나로 합치기만 할 뿐입니다. 그래서 css파일을 읽을 수 있는 외부 패키지를 설치해야 합니다.

npm i -D css-loader style-loader

webpack.config.js 을 설정해 줍니다.

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

• module 옵션의 순서는 상관없습니다.
• style-loader와 css-loader의 순서는 중요합니다. 먼저 해석되는 loader는 css-loader 입니다.
• 현재 main.js에서 main.css를 import로 가져오고 있는데 js파일은 css를 해석할 수 없습니다. 그래서 js파일에서 css를 해석하는 용도로 css-loader를 사용합니다. 이렇게 해석된 내용을 style-loader가 html의 style태그에 해석된 내용을 삽입해줍니다.

scss 적용

1. 아래 처럼 정규표현식을 수정해 줍니다.

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

2. 2개의 패키지를 설치해줍니다.
   npm i -D sass-loader sass
   - sass-loader : webpack에서 sass 파일을 읽어낼 수 있게 합니다.
   - sass : 읽을 때, 문법을 해석해 줄 수 있는 실제 sass 모듈입니다.
   

scss 모듈 적용하기

webpack.config.js 을 설정해 줍니다.
순서가 중요합니다!

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

공급업체 접두사를 자동으로 붙여주는 패키지 적용하기

1. 총 3개의 패키지를 설치합니다.
   npm i -D postcss autoprefixer postcss-loader

• postcss : 스타일의 후처리를 도와줍니다. autoprefixer라는 공급업체 접두사를 자동으로 붙여줍니다.
• autoprefixer : 공급업체 접두사를 제공합니다.
• postcss-loader : webpack에서 postcss를 동작시켜줄 수 있는 webpack의 loader입니다.

2. webpack.config.js 을 설정해 줍니다.
   순서가 중요합니다!

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

3. webpack.config.js 에 browserslist를 설정합니다.

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

4. .postcssrc.js파일을 최상위 루트에 만들고 내용을 작성합니다.

   module.exports = {
     plugins: [require("autoprefixer")],
   };

   • module.exports 는 node.js에서 동작합니다.
   • postcss의 플러그인으로 사용할 autoprefixer를 require()로 가지고 와서 연결해줍니다.

참고

style-loader로 style에 추가하고 있으니 index.html의 아래 내용은 더이상 필요하지 않습니다.

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

babel 설치

1. 총3개의 패키지를 설치합니다. (추가로 나중에 1개의 모듈을 더 설치해줍니다.)
   npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime

2. .babelrc.js 파일을 생성하고, 아래 내용을 작성합니다.

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

   • @babel/preset-env : 일일이 명시해주어야하는 js기능을 한번에 지원해줍니다.
   • @babel/plugin-transform-runtime : 비동기처리를 위해서 설치합니다.

3. webpack.config.js 의 module에 내용을 추가합니다.

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

4. 1개의 모듈을 설치해줍니다.
   npm i -D babel-loader

npx, degit

npx 명령어를 사용하면 설치하지 않고도 degit을 사용할 수 있습니다.

degit

github에 있는 원격의 저장소를 현재의 경로에 다운로드 받을 수 있는 기능을 제공합니다.

• npx degit {저장소 이름} {다운로드받을 폴더 이름}
• degit을 이용하면 버전내역이 없는 새 프로젝트로 다운로드하여 시작할 수 있습니다.

degit 없이 하는 방법

• github으로 직접 접속하여 해당 프로젝트를 Download ZIP으로 다운로드 하여 사용합니다.