Bundler ch.2 Webpack (1) ~ (8)

1. 프로젝트 생성

터미널에 아래와 같이 입력한 후 package.json 파일에 dev 서버와 build 서버 입력

• 터미널
  -> npm init -y
  -> npm i -D webpack webpack-cli webpack-dev-server@next
• package.json
  -> "dev": "webpack-dev-server --mode development"
  -> "build": "webpack --mode production"

그 후, html, js 파일 생성 후 webpack.config.js 파일까지 생성

2. entry, output

entry와 output을 webpack.config.js에 설정해 주어야 함
output은 적지 않아도 자동으로 터미널에 npm run build를 입력하면 생성되긴 함

• entry: 파일을 읽어들이기 시작하는 진입점 설정
• output: 결과물(번들)을 반환하는 설정

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

// exports
module.exports = {
    entry: "main.js",

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    }
}

=> output 부분에 폴더명을 바꾸는 등의 자세한 것들을 관리할 수 있음
=> 그러나, 기존 dist 폴더가 계속 남음

clean: ture

=> clean을 추가하면 남지 않음!

3. plugins

• dist 폴더에 index.html 삽입하는 방법

  터미널에 npm i -D html-webpack-plugin 입력 후 webpack.config.js 파일에서 가져온다.

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

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

    devServer: {
        host: 'localhost'
    }
}

4. 정적 파일 연결

static 폴더 생성 후 로고 이미지와 파비콘 이미지를 넣음.
static 폴더 안에 images 폴더 생성 후 안에 로고 이미지만 넣은 후 html에 아래와 같이 적음

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

static 폴더를 거치지 않고 이미지 파일을 여는 방법

터미널에 npm i -D copy-webpack-plugin 입력 후에 webpack.config.js 파일 아래 내용 추가

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

module.exports = {
    plugins: [
        new CopyPlugin({
            paterns: [
                { from: 'static' }
            ])
}

5. module

• 기본
  static 폴더 안에 css 폴더를 만든 뒤 main.css 파일 생성
  그 후, index.html에 링크를 통해 연결
  => css 파일로 이미지 파일처럼 static 폴더를 거치지 않고 연결할 수 있음

• 다른 방법
  css 파일을 루트 경로로 뺀 후 main.js 파일에 import "../css/main.css" 작성하면 css 파일을 찾아서 가지고 오게 된다.
  그러나, css 파일을 직접 읽을 수 없기 때문에 외부 패키지를 사용해야 한다.

• 해당 모듈 설치
  터미널에 npm i -D css-loader style-loader 입력 후 webpack.config.js에 아래와 같은 내용 작성

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

=> 순서 정확하게 입력!

6. SCSS

• scss 연결하는 방법
  모듈에 있는 정규표현식 /.s?css$/,로 바꾼 후 main.js 파일에 확장자 변경
  그 후 추가적으로 로더 설치, 터미널에 아래와 같이 입력

npm i -D sass-loader sass

설치 후에 use 부분에 'sass-loader' 추가로 입력

7. Autoprefixer(PostCSS)

• 공급 업체 접두사 붙이기
  터미널에 npm i -D postcss autoprefixer postcss-loader 입력 후에 use 안 css-loader 밑에 'postcss-loader' 입력
  package.json에 아래와 같이 입력

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

그 후에 .postcssrc.js 파일 생성하고 아래와 같이 입력

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

=> 구성 옵션 자체는 parcel과 같음

8. babel

• 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 부분에 아래와 같이 입력

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

다 끝나면 터미널에 npm i -D babel-loader 입력!