Webpack 4가지 속성

WebPack 주요 속성 4가지

Entry : Build를 하고자하는 대상 파일

output : Build를 하고나서 나오는 결과물 파일

loader : output되는 JS파일안에 웹자원(CSS, font, img, html) 파일들을 Webpack가능하도록 도와줌

plugin : Webpack결과에 대한 기본적인 동작에서 추가적인 기능을 제공하는 속성

Build = 변환 = 번들링 = 컴파일

Entry

entry 속성은 Webpack에서 웹자원을 변환하기 위해 필요한 최초 진입 JS 파일경로입니다.

module.exports = {
    entry: './js/app.js'
}

Output

output 속성은 Webpack을 돌리고난 후 결과물 파일입니다.

• path? 파일 경로
• filename? 피일명

module.exports = {
    output: {
            path: path.resolve(__dirname, 'build'),
            filename: 'main.bundle.js'
    },
}

Loader

Webpack이 웹 어플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹자원을 변환할 수있도록 도화주는 속성입니다.

• 웹자원? HTML, CSS, Images, font 등
• module 이라는 속성명을 갖고있습니다.
• test에 정의된 규칙들을 정의
• css-loader ? JS 파일안에 CSS 파일을 빌드(webpack) 하고자 할 때 사용
• style-loader ? css파일을 Dom객체에 적용하고자 할 경우 사용
• ※ 주의사항 : ['style-loader', 'css-loader'] 해당 순서로 선언해야함 
  why? Loader는 오른쪽에서 왼쪽으로 적용때문에

module.exports = {
  module: {
    // 규칙
    rules: [
      {
        // css 확장자를 가진 모들 파일들은
        test: /\.css$/,
        // 아래 loader을 사용하겠다.
        use: ['style-loader', 'css-loader']
      }
    ]
  },
}

sass 파일을 webpack할 경우

• 순서 오른쪽에서 왼쪽
• sass 파일을 인식하도록 하고, 
  css 파일을 bundle 가능하도록 한 뒤
  style 을 dom에 적용 가능하도록 한다.

module.exports = {
  module: {
    // 규칙
    rules: [
      {
        // css 확장자를 가진 모들 파일들은
        test: /\.css$/,
        // 아래 loader을 사용하겠다.
        use: ['style-loader', 'css-loader', 'sass-Loader']
      }
    ]
  },
}

Loader 예제1

flugins

• Webpack에서 기본적인 동작에 추가적인 기능을 제공하는 속성
• 플러그인의 배열에는 생성자 함수로 생성한 객체 인스턴스만 추가될 수 있습니다.
• 자주사용하는 flugins 참조 > https://joshua1988.github.io/webpack-guide/concepts/plugin.html#plugin

plugins: [
  // 웹팩으로 빌드한 결과물로 HTML파일을 생성해주는 플러그인
  new HtmlWebpackPlugin(),
  // 웹팩의 빌드 진행율을 표시해주는 플러그인
  new webpack.ProgressPlugin()
],

---

예제

1. webpack.config.js 파일에서 초반 진입점을 index.js로 설정한다. 2. index.js는 base.css를 포함하고 있다.

결과 - output으로 설정된 bundle.js파일안에 base.css가 포함되어 있다. 

webpack.config.js

var path = require('path');

module.exports = {
  mode: 'none', // production, development, none
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
}

mode은 웹팩버전 4 이상에서 추가된 속성으로 
production모드, development모드, none모드로 설정 가능하다.

참고

• 인프런 강의 주소 
  https://github.com/joshua1988/LearnWebpack
• 수업 교안 사이트 
  https://joshua1988.github.io/webpack-guide/guide.html
• Loader, plugin 
  https://webpack.js.org/