22.11.26 : CRA없이 프로젝트 생성하기-3 (웹팩 설정, 주요 속성)

Reference :  캡틴판교님 강의, 웹팩 핸드북

 

 

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=none --entry=src/index.js --output=public/output.js"
  },

 

이렇게 package.json에서 직접 웹팩을 설정하게 되면 추가해야 할 것이 너무 많다.

프로젝트폴더 루트 레벨에 webpack 설정파일을 만들어주자.

 

 

webpack.config.js

 

// node.js의 모듈문법 
// path라는 node.js 라이브러리를 가져옴
var path = require("path");

module.exports = {
  mode: "none",
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    // path.resolve라는 API를 사용. dist라는 디렉토리를 기준으로 한다~
    path: path.resolve(__dirname, "dist"),
  },
};

//entry에 있는 파일을 webpack을 돌려서 output의 결과물을 낸다.

 

 

index.js

 

// ES6
import _ from "lodash";
// ES5문법인 경우 아래와 같이 씀
// var _ = require("lodash");
// var path = require("path");

function component() {
  var element = document.createElement("div");

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(["Hello", "webpack"], " ");
  // element,innerHTML = 'Hello webpack' 위의 코드와 같은 의미

  // 'Hello webpack' 이라는 텍스트가 넣어져있는 div 태그를 화면에 붙여주었다

  return element;
}

document.body.appendChild(component());

 

이제 package.json은 build webpack 이라고만 적어주면 webpack.config.js의 설정을 불러올것임

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

 

터미널에서 npm run build 하면 dist 폴더 main.js가 모드 설정이 되어있지 않았을 때는 난독화 되어있던것이 읽을 수 있게 바뀌게 됨.

 

웹팩 주요 속성

 

entry: 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로

entry 속성에 지정된 파일에는 웹 애플리케이션의 전반적인 구조와 내용이 담겨있어야 한다. 웹팩이 해당 파일을 가지고 웹 애플리케이션에서 사용되는 모듈들의 연관관계를 이해하고 분석하기 때문에 애플리케이션을 동작시킬 수 있는 내용들이 담겨져야 함.

엔트리 포인트는 1개 또는 여러개가 될 수도 있다. 여러개가 되는 경우는 SPA가 아닌 MPA(Multi Page Application)에 적합하다.

 

output: 웹팩을 돌리고 난 결과물의 파일 경로를 의미한다.

객체 형태로 옵션들을 추가해야 한다. filename은 웹팩으로 빌드한 파일의 이름, path는 해당 파일의 경로를 의미.

path.resolve()는 인자로 넘어온 경로들을 조합해서 유효한 파일 경로를 만들어주는 Node.js API이다.

파일의 이름은 각각 엔트리 이름, 모듈 아이디, 해시 값 등이 포함될 수 있다.

 

loader

웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 자원들을 변환하게 도와주는 속성

자주 사용되는 로더 종류들

CSS Loader

Babel Loader

File Loader

Vue Loader

TS Loader

로더 여러개 사용시 rules 배열에 로더 옵션을 추가해 주면 된다.

 

module.exports = {
  entry: './app.js'
  output: {
  	filename: 'bundle.js'
  },
  modules: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
      // ...
    ]
  }
}

 

로더를 적용하는 순서

특정 파일에 대해 여러개의 로더 사용 시 순서에 주의해야한다. 로더는 오런쪽에서 왼쪽 순으로 적용된다.

CSS의 확장 문법인 SCSS 파일에 로더를 적용하는 경우

 

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

 

scss파일에 대해 먼저 sass 로더로 전처리(scss 파일을 css 파일로 변환) 한 다음 웹팩에서 CSS 파일을 인식할 수 있게 CSS 로더를 적용하는 코드이다.

 

만약 웹팩으로 빌드한 자원으로 실행했을 때 해당 CSS 파일이 웹 애플리케이션에 인라인 스타일 태그로 추가되는 것을 원하면 아래와 같이 style 로더로도 추가할 수 있다.

 

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

 

위와 같이 배열로 입력하는 대신 아래와 같이 옵션을 포함한 형태로도 입력할 수 있음.

 

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

 

plugin

 

플러그인은 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성이다. 로더와 비교하면 로더는 파일을 해석하고 변환하는 과정에 관여하고, 프럴그인은 해당 결과물의 형태를 바꾸는 역할을 한다고 보면 됨.

 

플러그인은 아래와 같이 선언한다.

 

// webpack.config.js
module.exports = {
  plugins: []
}

 

플러그인의 배열에는 생성자 함수로 생성한 객체 인스턴스만 추가될 수 있다. 

 

// webpack.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(),
    new webpack.ProgressPlugin()
  ]
}

 

HtmlWebpackPlugin: 웹팩으로 빌드한 결과물로 HTML 파일을 생성해주는 플러그인

ProgressPlugin: 웹팩의 빌드 진행율을 표시해주는 플러그인

 

자주 사용하는 플러그인

• split-chunks-plugin
• clean-webpack-plugin
• image-webpack-loader
• webpack-bundle-analyzer-plugin