Webpack

NPM Project 시작을 위해 - 

npm init -y

 

Webpack 기본 패키지 설치 

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

webpapck-cli 와 dev-server 버젼을 맞춰주기 위해 뒤에 @next를 붙여줌 

 

 

package.json 에서 Script 설정  

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

앞서 설치한 webpack-cli 라는 패키지로 이렇게 커맨드 사용할 수 있게해줌.

 

 

webpack.config.js 생성 

Command 사용하기에 앞서 구성요소를 사용자가 webpack.config.js 라는 파일을 생성해 설정 해줘야한다.

// import
// path라는 전역변수를 가져와 path 라는 변수에 넣어놓음 
const path = require('path')


// export
module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: './js/main.js',
  
  // 결과물(번들)을 반환하는 설정
  output: {
    //__dirname 또한 node 환경에서 사용할 수 있는 전역 변수 그리고 절대 경로 사용해야함
    path: path.resolve(__dirname, 'dist'),
    
    // bundle한 파일 이름 설정
    filename: 'main.js',
    
    // 기존 폴더안에 bundle했던 파일들 정리
    clean:true
  }
}

https://webpack.js.org/configuration/output/#outputpath

Output | webpack

 

---

플러그인

[ plugins ]

Installation Command

npm i -D html-webpack-plugin

 

  html-webpack-plugin은 번들링할 때 html5 생성을 단순화해주고, js파일들을 <script> 태그가 포함됩니다.

 

How to Set in webpack.config.js

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

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

 

https://webpack.kr/plugins/html-webpack-plugin/

HtmlWebpackPlugin | 웹팩

---

Installation Command

npm i -D copy-webpack-plugin

copy-webpack-plugin은 번들링할때의 개별 파일 혹은 전체 폴더를 복사해서 결과 폴더에 붙여넣어 줍니다.

How to Set in webpack.config.js

const CopyPlugin = require('copy-webpack-plugin')

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

 

https://webpack.kr/plugins/copy-webpack-plugin

CopyWebpackPlugin | 웹팩

 

 

 

모듈

[ Module ] 

 

static에 css 폴더를 만들어서 사용 및 관리를 할 수 있지만 css 폴더를 root단으로 빼서 사용을 해볼 수도 있다. 이렇게 root단에서

사용하면 할 수 있는게 더 많다고 한다. 일단 main.js 파일에서 불러들인다. 같이 roo단에 있으니 이렇게 불러들이고 

import '../css/main.css'

하지만 js에서 이렇게 불러와도 css를 읽을 수 없고, webpack또한 읽을 수 없다.  이때 패키지 두개를 설치를 해야하는데, 

 

Installation Command

npm i -D css-loader style-loader

How to Set in webpack.config.js

  module: {
    rules: [
      {
       	// .css로 끝나는 파일을 찾는 정규식
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },

css-loader : CSS를 읽을 수 있게 해주는 패키지다.

style-loader : 읽은 CSS 정보를 html 파일에 style 태그안에 생성을 해준다. 

 

---

SCSS

Installation Command

npm i -D sass-loader sass

How to Set in webpack.config.js

module: {
    rules: [
      {
        test: /\.s?css$/,     //scss, css 둘다 탐색하도록 정규식 작성
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'       // sass loader 불러와서 읽을 수 있게 만듬 
        ]
      }
    ]
  }

import '../scss/main.scss' // 자바스크립트 파일 내 import 경로 변경

 

---

Autoprefixer (PostCSS)

PostCSS 란 ? 

- 일상적인 CSS 동작을 자동화하기 위해 자바스크립트 기반 플러그인을 사용하는 소프트웨어 개발 도구라고 위키에 쓰여있다. 

 

Installation Command

npm i -D postcss autoprefixer postcss-loader

postcss:  style의 후처리를 도와줄 패키지

autoprefixer: 브라우저마다 맞는 접조사 자동을 붙여주는 패키지 

postcss-loader : postcss를 읽기 위한 패키지 

 

How to Set in webpack.config.js

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

use에 넣는 loader들을 순서가 중요한데, 아래에서 위로 올라간다고 보면된다. 

1. sass-loader 는 scss 파일에 스타일링을 전반적으로 하기 때문에 먼저 읽어준다.
2. postcss-loader가 읽어온 정보에 브라우저에 맞는 접조사를 자동을 붙여준다.
3. css-loader가 후처리가 다 끝난 내용을 읽어드린다.
4. style-loader가 css 정보를 index.html 에 style태그로 옮겨준다.

그 다음엔 package.json 에서 하단에 이렇게 코드를 작성해주는데 전세계 1퍼센트 이상의. 브라우저에서 마지막 2개의 버전을 지원한다는 것을 명시해준다는 건데 사실 잘 이해는 안된다.  현재 이 프로젝트가 어떠한 대상 브라우저 지원하는지 명시한다고 한다. 

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

 

그리고 root 경로에 .postcssrc.js 파일을 생성해주고 구성옵션을 넣어준다. 

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

 

---

바벨

[ Babel ] 

 

Installation

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

create .babelrc.js  and setting 

// preset : 일일히 따로 명시해줘야하는 자바스크립트의 기능을 한번에 지원해주는 패키지
// plugins : 비동기 처리를 위한 패키지
// 배열데이터안에 문자데이터로 패키지 명시 
module.exports = {
  presets: ['@babel/preset-env'],

  // 배열안에 배열있는 것을 2차원 배열이라고 한다. 
  plugins: [
    ['@babel/plugin-transform-runtime']
  ]
}

webpack.config.js

module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      },
      // test 속성에 정규표현식으로 js 확장자등록하고, 
      // babel 동작하게 끔 패키지를 다운받아 사용하는데, 웹팩이 해석을 하려면 bable-loader가 필요
      {
        test: /\.js$/,
        use: [
          'babel-loader'
        ]
      }
    ]
  },