[Bundler] Webpack

Webpack

매우 꼼꼼한 구성
중/대형 프로젝트에 적합

설치

$ npm i -D webpack webpack-cli webpack-dev-server@next

package.json

"scripts": {
  "dev": "webpack-dev-server --mode development",
  "build": "webpack --mode production"
}

webpack.config.js

const path = require('path') // 전역 모듈 설치x

module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: './js/main.js',
  
  // 결과물(번들)을 반환하는 설정
  output: {
    // path, filename 생략 가능
    // path: path.resolve(__dirname, 'dist'), // 절대경로만 가능, __dirname: 현재 파일의 절대 경로
    // filename: 'app.js',
    clean: true // 재빌드시 기존 파일들 삭제
  }
}

plugins

설치

$ npm i -D html-webpack-plugin

webpack.config.js

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

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

정적 파일 연결

설치

$ npm i -D copy-webpack-plugin

webpack.config.js

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

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'static' } // copy할 디렉토리 이름
      ]
    })
  ],
}

CSS

설치

$ npm i -D css-loader style-loader

main.js

import '../css/main.css'

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // 정규표현식 .css로 끝나는 파일 찾기
        use: [ // 순서 중요!
          'style-loader', // 분석된 css를 html style태그로 삽입
          'css-loader'
        ]
      }
    ]
  }
}

SCSS

설치

$ npm i -D sass-loader sass

main.js

import '../scss/main.scss'

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s?css$/, // 정규표현식 .scss .css로 끝나는 파일 찾기
        use: [ // 순서 중요!
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
}

autoprefixer

자동으로 공급 업체 접두사(Vender Prefix)가 붙은 속성을 만들어줌

설치

$ npm i -D postcss autprefixer postcss-loader

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s?css$/, // 정규표현식 .scss .css로 끝나는 파일 찾기
        use: [ // 순서 중요!
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  }
}

package.json

"browserslist": [
  "> 1%", /* 점유율이 1% 이상인 브라우저 */
  "last 2 versions" /* 위에서 선택한 브라우저의 하위 2번째 버전까지 */
]

.postcssrc.js

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

NodeJS에서는 ESM(import,export)을 지원하지 않고 CommonJS(require,module.exports)을 지원한다.

babel

ES6이상의 문법으로 만들어진 JS를 ES5로 변환하는 트랜스컴파일러
package.json에 browserslist 추가해야 함

설치

$ npm i -D babel-loader @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.exports = {
  module: {
    rules: [
      {
        test: /\.js$/, // 정규표현식 .js로 끝나는 파일 찾기
        use: [
          'babel-loader'
        ]
      }
    ]
  }
}