Vue.js/02.__Webpack

Webpack 4가지 속성

✨✨✨✨✨✨✨ 2020. 12. 29. 16:08
반응형

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

    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모드로 설정 가능하다.

    참고


    반응형
    저작자표시