Webpack

참고자료 : 캡틴판교 웹팩

NPM

NPM(Node Package Manager) : JS 언어를 위한 패키지 관리자
https://www.npmjs.com/

* npm 장점

library 간의 의존성, 버전 관리가 쉬움(package.json에서)

* npm init -y

package.json을 생성

* npm install '패키지명'

node_modules 폴더 안에 설치됨
전역 설치(--global) 시에는 '%USERPROFILE%\AppData\Roaming\npm\node_modules' 에 설치됨
package.json에 dependencies가 입력됨
--save-dev(-D) -> package.json에 devDependencies로 입력됨

dependencies : 애플리케이션 동작에 필요한 배포용 라이브러리(jquery, vue 등)
devDependencides : 개발용 라이브러리(webpack 등)

npm i

package.json에 의존성 맺은 모듈들을 설치해줌

webpack : 프런트엔드 프레임워크에서 많이 사용되는 모듈 번들러 (HTML, CSS, JS, image 등을 병합) 브라우저를 위한 사전 컴파일러
실습 url npm i webpack webpack-cli -D

script 작성 후,
package.json에 아래를 추가한 후 npm run build로 빌드를 하면 dist폴더와 main.js가 생성됨

"scripts": {
  "build": "webpack --mode=none"
}

npm run build를 실행하면 "build" : 에 있는 것들이 실행된다고 보면 됨
프로젝트 루트 레벨에 webpack.config.js 파일을 만들어서 entry, output 등의 옵션을 설정할 수 있음

var path = require('path');

module.exports = {
  mode: 'none', // none으로 해야 main.js 파일을 해석할 수 있음 -> 배포할땐 production으로
  entry: './src/index.js',
  output: { // webpack으로 변환한 빌드 결과 파일
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

webpack 장점

request 수를 줄일 수 있음(개별 라이브러리마다 다 요청할 필요가 없기 때문)
브라우저 별로 http 요청 숫자가 제한되어 있음(크롬: 6개)
개발자도구 - Network에서 확인할 수 있음
gulp파일을 만들어서 돌리던 작업들을 자동으로 해줌

sourcemap

webpack.config.js에 devtool: 'sourec-map' 추가해주면
개발자 도구에서 source는 병합되기 전 원본 파일들로 구분되어 있는걸 볼 수 있음

Webpack 주요 속성

entry, output, loader, plugin

1. entry

빌드하기 위해 필요한 최초 진입점

2. output

빌드된 결과물의 파일 경로

3. loader(module)

https://webpack.js.org/loaders/
js가 아닌 웹 자원들을 변환할 수 있도록 도와주는 속성
import한 웹 자원을 빌드 파일에 넣어줌
use: loader의 순서는 오른쪽부터.. 순서가 바뀌면 build가 안됨 예) style-loader, css-loader

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
      // style-loader : css style을 <head> 안에 inline으로 삽입
      // css-loader : css파일을 import할 수 있도록 함
    }
  ]
}

4. plugins

https://webpack.js.org/plugins/
웹팩의 기본적인 동작에 추가적인 기능을 제공
빌드 결과물의 형태를 바꾸는 역할

var path = require('path');
var MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: 'none',
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          "css-loader"
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin()
    // css를 통합된 .css파일로 extract함(main.css) -> index.html에 link 걸어줘야 함
  ],
}

※ html-webpack-plugin tempale:에 지정한 .html 파일에 빌드 결과물을 포함함

Webpack Dev Server

코드 변경시마다 빌드 명령어를 실행하지 않아도, 저장만 하면 자동으로 빌드하고 새로고침 해줌
빌드 결과물은 파일이 아닌 메모리에 저장됨

"scripts": {
  "dev": "webpack serve",
  "build": "webpack"
}

npm run dev

Webpack - newlife-js/Wiki GitHub Wiki

NPM

* npm 장점

* npm init -y

* npm install '패키지명'

npm i

Webpack

webpack 장점

sourcemap

Webpack 주요 속성

1. entry

2. output

3. loader(module)

4. plugins

Webpack Dev Server

Webpack 예시 파일

⚠️ GitHub.com Fallback ⚠️

Webpack - newlife-js/Wiki GitHub Wiki

NPM

* npm 장점

* npm init -y

* npm install '패키지명'

npm i

Webpack

webpack 장점

sourcemap

Webpack 주요 속성

1. entry

2. output

3. loader(module)

4. plugins

Webpack Dev Server

Webpack 예시 파일

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️