Webpack

 

프로젝트 설치

 

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

설치가 완료되면
package.json 내부에 생성됨
"devDependencies": {
    "webpack": 설치된 버전이 명시,
    "webpack-cli": 설치된 버전이 명시,
    "webpack-dev-server": 설치된 버전이 명시  
}

 

프로젝트 실행

 

## 세팅 ##
package.json 내부에 "scripts" 수정

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

## 구성 설정 ##
프로젝트 루트 경로에 webpack.config.js 파일 생성

 

/* webpack.config.js */

const path = require('path')

module.exports = {
  // webpack은 js를 진입점으로 사용
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: './js/main.js',

  // 결과물(번들)을 반환하는 설정
  output: {
    // 어떠한 경로에다가 결과물을 만들어서 내어줄지 명시 (절대경로)
    // 기본값
    // path: path.resolve(__dirname, 'dist'),
    
    // 결과물의 파일의 이름
    // 기본값
    // filename: 'main.js',
    
    // 기존의 만들었던 내용 제거
    clean: true
  }
}

 

Plugins

 

## HTML 연동을 위해 설치 ##
$ npm i -D html-webpack-plugin

webpack.config.js 파일에 내용 추가

 

/* webpack.config.js */

const path = require('path')

// 추가된 부분
const HtmlPlungin = require('html-webpack-plugin');

module.exports = {
  entry: './js/main.js',
  output: {
    clean: true
  },

 // 추가된 부분
 // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
  plugins: [
    new HtmlPlungin({
      template: './index.html'
    })
  ]
}

 

정적 파일 연결

 

dist 폴더로 자동으로 넣어줄 수 있는 패키지를 설치한다

 

## 패키지 설치 ##
$ npm i -D copy-webpack-plugin

webpack.config.js 파일에 내용 추가

 

/* webpack.config.js */

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

module.exports = {
   plugins: [
    new CopyPlugin({
      patterns: [
        // 만들어놓은 폴더의 이름을 명시
        { from: 'static'}
      ]
    })
  ]
}

 

Module (CSS, SCSS 연결)

 

# Loader #
# 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성 #
$ npm i -D css-loader style-loader
$ npm i -D sass-loader sass

package.json 내부에 내용 추가
"browserslist": [
    "> 1%",
    "last 2 versions"  
]

webpack.config.js 파일에 내용 추가

 

/* webpack.config.js */

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

 

/* main.js */

// import '../css/main.css'
import '../scss/main.scss'

 

Autoprefixer

 

# CSS 속성의 공급 업체 접두사 (Vender Prefix) 를 사용자의 브라우저에 따라 자동으로 붙여주는 플러그인 #
$ npm i -D postcss autoprefixer postcss-loader

webpack.config.js 파일에 내용 추가
.postcssrc.js 파일 생성 후 내용 추가

 

/* webpack.config.js */

module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [
          'style-loader',
          'css-loader',
          // 추가된 부분
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },

 

/* .postcssrc */
// ESM - (improt, export 키워드를 사용하는 방식)
// node.js 에서는 CommonJS 방식을 사용

// import 대신 require() 방식으로 js파일을 외부에서 가져옴
// export 대신 module.exports 방식으로 내용들을 내보내기 

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

 

Babel

 

## 패키지 설치 ##
$ npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime
$ npm i -D babel-loader

webpack.config.js 파일에 내용 추가
.babelrc.js 파일 생성 후 내용 추가

 

/* webpack.config.js */
module: {
    rules: [      
      {
        test: /\.js$/,
        use: [
          'babel-loader'
        ]
      }
    ]
  },

 

/* .babelrc.js */
module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    ['@babel/plugin-transform-runtime']
  ]
}

 

---

참고

https://webpack.js.org/concepts/

Concepts | webpack