webpack

수정이력

• 22.04.09 - @vue/compiler-sfc, vue-loader, vue-style-loader, file-loader, eslint, eslint-plugin-vue, babel-eslint 추가

package

(아래 패키지들의 숫자는 구분하기 편하기 위해 작성한 것이라 순서는 무관)

1. webpack

• 웹팩 베이스 패키지

설치

$ npm i -D webpack

---

2. webpack-cli

• 커맨드라인 인터 페이스를 사용하기 위한 패키지

설치

$ npm i -D webpack-cli

---

3. webpack-dev-server

• 개발 서버 구동 및 HMR을 사용하기 위한 패키지

설치

$ npm i -D webpack-dev-server

---

4. html-webpack-plugin

• html로 결과물을 생성하기 위한 플러그인

설치

$ npm i -D html-webpack-plugin

설정

// webpack.config.js

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

module.exports = {
  plugins: [
    new HtmlPlugin({
      template: './index.html' // 출력될 html 파일 경로 설정
    })
  ]
}

---

5. copy-webpack-plugin

• 결과물(번들) 폴더에 static한 기타 파일들을 넣기 위한 플러그인

설치

$ npm i -D copy-webpack-plugin

설정

// webpack.config.js

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

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'static' } // 정적 파일을 모아둔 폴더명
        // (객체로 여러개 추가 가능)
      ]
    })
  ]
}

---

6. css-loader, style-loader

• css-loader - webpack이 css를 해석하고 적용시키기 위한 로더
• style-loader - webpack이 해석된 css를 html의 head 태그 안에 넣어주기 위한 로더

설치

$ npm i -D css-loader style-loader

css import

// main.js

import '../css/main.css'

설정

• 로더의 선언 순서가 중요하다. 배열 뒤부터 읽어주기 때문에 css-loader를 제일 밑에 선언한다.

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

---

7. sass-loader, sass

• sass-loader - webpack이 scss 문법을 해석하고 적용시키기 위한 로더
• sass - sass, scss 문법을 해석하기 위한 패키지

설치

$ npm i -D sass-loader sass

설정

• scss 문법이 css로 해석이 된 다음에 css-loader가 작동해야 하기 때문에 sass-loader를 제일 뒤에 작성한다.

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s?css$/, // 정규표현식은 scss, css 모두 찾을 수 있게 작성
        use: [
          // 순서 주의!
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
}

---

8. postcss, postcss-loader, autoprefixer

• postcss - css의 후처리 기능을 지원해주는 패키지
• postcss-loader - webpack이 css 후처리 기능을 해석하고 적용시키기 위한 로더
• autoprefixer - css에 vendor-prefix를 자동으로 붙여주는 기능의 패키지

설치

$ npm i -D postcss postcss-loader autoprefixer

설정

• webpack.config.js 파일에 postcss-loader 설정
  • postcss-loader는 scss가 올바르게 해석된 후 작동되어야 한다. (선언 순서 주의)
• .postcssrc.js 파일에 autoprefixer 연결
• package.json 파일에 "browserslist" 옵션 추가

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s?css$/, // 정규표현식은 scss, css 모두 찾을 수 있게 작성
        use: [
          // 순서 중요!
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  }
}

• autoprefixer는 .postcssrc.js에 설정해서 사용한다.

// .postcssrc.js

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

• 벤더 프리픽스로 지원하는 범위를 package.json 파일에 browserslist 옵션으로 추가한다.
• 아래의 경우 전세계 점유율 1% 이상, 마지막 2 버전까지 지원하는 설정.

// package.json

{
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

---

9. @babel/core, @babel/preset-env, @babel/plugin-transform-runtime, babel-loader

• @babel/core - babel을 작동하게 하는 core 패키지
• @babel/preset-env - es6 문법을 해석하는 통합 프리셋 플러그인
• @babel/plugin-transform-runtime - es7 문법을 해석하는 플러그인
• babel-loader - webpack에서 babel을 적용할 수 있게 해주는 로더

설치

$ npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime babel-loader

설정

• .babelrc.js 파일에 @babel/preset-env과 @babel/plugin-transform-runtime 플러그인을 연결
• package.json에 지원 범위를 작성(autoprefixer 사용으로 작성했으면 패스)
• webpack.config.js 파일에 babel-loader 연결

// .babelrc.js

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

• postcss로 인해 이미 작성했으면 browserslist 옵션은 생략 가능

// package.json

{
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

• js 파일에 적용할 babel-loader를 아래와 같이 연결

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'babel-loader'
        ]
      }
    ]
  }
}

---

10. @vue/compiler-sfc, vue-loader, vue-style-loader

• @vue/compiler-sfc - vue 문법 파일을 해석하기 위한 공식 패키지(vue의 버전과 동일한 버전을 유지해야 정상 작동을 보장함)
• vue-loader - vue 문법 파일을 webpack에서 해석하기 위한 공식 로더
• vue-style-loader - vue 파일 안에 style 태그를 해석하기 위한 로더

설치

$ npm i -D @vue/compiler-sfc vue-loader vue-style-loader

설정

• vue-loader 초기화 및 연결
• vue-style-loader 연결

// webpack.config.js

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader' // vue-loader 연결
      },
      {
        test: /\.s?css$/,
        use: [
          // 순서 중요!
          'vue-style-loader', // vue-style-loader 연결
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      },
    ]
  },
  
  plugins: [
    new VueLoaderPlugin() // vue-loader 초기화
  ]
}

---

11. file-loader

• webpack 에서 번들링 시 정적 파일들을 결과물 폴더('dist')로 복사해주는 로더
  • static 폴더에 들어가 있는 이미지 파일들은 webpack이 번들링하는 과정에서 후처리 등이 안되기 때문에 webpack이 이해할 수 있도록 file-loader를 사용

설치

$ npm i -D file-loader

설정

• file-loader 연결

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp)$/i,
        use: 'file-loader'
      }
    ]
  }
}

---

12. eslint, eslint-plugin-vue, babel-eslint

• eslint - eslint 베이스 플러그인
• eslint-plugin-vue - vue 문법에 eslint를 지원해주는 공식 플러그인
• babel-eslint - es6 이상의 문법에 eslint를 지원해주는 플러그인

설치

$ npm i -D eslint eslint-plugin-vue babel-eslint

설정

• .eslintrc.js 파일 생성 및 옵션 설정
• babel-eslint 연결

// .eslintrc.js

module.exports = {
  env: {
    browser: true, // 브라우저 환경에 lint 적용
    node: true // node 환경에 lint 적용
  },
  extends: [
    // vue - https://eslint.vuejs.org/rules/
    // 'plugin:vue/vue3-essential', // Lv1
    'plugin:vue/vue3-strongly-recommended', // Lv2
    // 'plugin:vue/vue3-recommended', // Lv3 (가장 엄격)

    // js - https://eslint.org/docs/rules/
    'eslint:recommended' // 일단 js의 lint
  ],
  parserOptions: {
    parser: 'babel-eslint' // babel-eslint 연결
  },
  rules: {
    // vue의 eslint 규칙을 custom 하고 싶을 때 작성
    // https://eslint.vuejs.org/rules/
    "vue/html-closing-bracket-newline": ["error", {
      singleline: "never",
      multiline: "never"
    }],
    "vue/html-self-closing": ["error", {
      html: {
        void: "always",
        normal: "never",
        component: "always"
      },
      svg: "always",
      math: "always"
    }]
  }
}

---

CLI

• 개발 서버 및 빌드 기본 명령어

// package.json

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

---

webpack.config.js

• entry - 파일이 읽어들이기 시작하는 진입점 경로
• output - 결과물(번들)을 반환하는 설정
  • path - 번들된 결과물이 들어갈 폴더 (default 값 : 'dist')
  • filename - 번들된 결과물 파일의 이름 설정 (default 값 : entry의 진입점 파일)
  • clean - 빌드시 기존 불필요한 내용 삭제

---

최종 결과물

• package.json

{
  // ...
  
  "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "devDependencies": {
    "@babel/core": "^7.17.9",
    "@babel/plugin-transform-runtime": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "@vue/compiler-sfc": "^3.2.31",
    "autoprefixer": "^10.4.4",
    "babel-loader": "^8.2.4",
    "copy-webpack-plugin": "^10.2.4",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "postcss": "^8.4.12",
    "postcss-loader": "^6.2.1",
    "sass": "^1.50.0",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",
    "vue-loader": "^17.0.0",
    "vue-style-loader": "^4.1.3",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.8.1"
  },
  "dependencies": {
    "vue": "^3.2.31"
  }
    
  // ...
}

• .babelrc.js

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

• .postcssrc.js

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

• webpack.config.js

// const path = require('path') // node 환경에서 기본 제공하는 전역 모듈
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
  resolve: {
	extensions: ['.js', '.vue'], // import시 js, vue 파일 확장자 생략 설정
	// 경로 별칭
    alias: {
      '~': path.resolve(__dirname, 'src'),
      'assets': path.resolve(__dirname, 'src/assets')
    }
  },
  
  // 파일이 읽어들이기 시작하는 진입점 설정
  entry: './js/main.js',

  // 결과물(번들)을 반환하는 설정
  output: {
    // 따로 지정 안하면 'dist' 폴더로 사용(__dirname : 현재 파일 경로 나타내는 전역 변수)
    // path: path.resolve(__dirname, 'dist'),

    // 따로 지정 안하면 entry 옵션의 js를 default로 사용
    // filename: 'main.js',

    // 기존 불필요한 내용 삭제
    clean: true,
  },

  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.s?css$/,
        use: [
          'vue-style-loader',
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 제외할 경로
        use: [
          'babel-loader'
        ]
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/i,
        use: 'file-loader'
      }
    ]
  },

  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
  plugins: [
    new HtmlPlugin({
      template: './index.html'
    }),
    new CopyPlugin({
      patterns: [
        { from: 'static' }
      ]
    }),
    new VueLoaderPlugin()
  ],

  devServer: {
    host: 'localhost',
    // port: 8081
  }
}