39. Webpack

이 강의에서는 Webpack에 대한 간략한 개요를 제공합니다.
주요 내용은 다음과 같습니다:

Webpack 소개: Vite를 주로 사용하더라도, 개발자로서 Webpack을 접할 수 있으므로 Webpack에 대한 기본적인 이해가 필요합니다.
Webpack은 모듈 번들러로, JavaScript만 기본적으로 지원하며, 다른 언어나 파일 타입을 위해서는 추가 구성이 필요합니다.
Webpack 설정: webpack.config.js 파일을 통해 Webpack을 구성합니다.
이 파일에서는 엔트리 포인트, 출력 설정, 모듈 규칙, 플러그인 등을 정의합니다.
자바스크립트 및 CSS 지원: Babel을 사용하여 JavaScript 파일을 처리하고, 여러 로더와 플러그인을 사용하여 CSS 파일을 처리합니다.
Mini CSS Extract Plugin을 사용하여 CSS를 별도의 파일로 추출할 수 있습니다.
Webpack 실행: npm run start 명령어로 Webpack을 실행하면 프로젝트의 파일이 변경될 때마다 자동으로 번들을 생성합니다.
생성된 번들은 dist 디렉토리에 저장됩니다.

이 강의는 Webpack이 어떻게 작동하고 어떻게 설정되는지에 대한 기본적인 이해를 제공합니다.
Webpack은 보다 복잡하고 세밀한 설정이 필요한 도구이며, JavaScript 및 CSS 파일을 최적화하고 번들링하는 데 사용됩니다.

index.js

import "./style.scss"
  
document.querySelector("#app").innerHTML = `
  <h1>Hello Webpack!</h1>
  <a href="https://webpack.js.org/concepts/" target="_blank">Documentation</a>
`

package.json

{
   "name": "5.1-new",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "start": "webpack --mode=development",
      "build": "webpack --mode=production"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
      "@babel/core": "^7.18.6",
      "@babel/preset-env": "^7.18.6",
      "autoprefixer": "^10.4.7",
      "babel-loader": "^8.2.5",
      "css-loader": "^6.7.1",
      "mini-css-extract-plugin": "^2.6.1",
      "sass": "^1.53.0",
      "postcss-loader": "^7.0.0",
      "sass-loader": "^13.0.2",
      "style-loader": "^3.3.1",
      "webpack": "^5.73.0",
      "webpack-cli": "^4.10.0"
   },
   "browserslist": [
      "> 1%",
      "last 2 versions"
   ]
}

postcss.config.js

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

style.scss

h1{
  color: #CC3244;  

  // h1 span
  span{
    color: blue;
  }

  &:hover{
    color: darken(#CC3244, 10%);
  }
}
  
::placeholder {
  color: red;
}

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: 'babel-loader'
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'main.css'
    })
  ],
  watch: true
}

# 39. Webpack

39. Webpack