Webpack
init
npm init -y
설치
npm i -D webpack webpack-cli webpack-dev-server
-D는 개발자 dependency
webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/js/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./dist"),
clean: true
}
}-
entry
js 파일의 진입점 -
output
빌드를 했을 때 번들 파일에 대해 지정해줌- filename
번들될 파일 이름 - path
번들될 파일의 경로 - clean
번들될 파일의 경로에 다른 파일이 있다면 지우고 새로 번들하는 것
- filename
-
devtool
빌드한 파일과 원본 파일을 연결 해줌 -
mode
development / production -
terser-webpack-plugin
최적화 하는 플러그인 모듈
HTML 관련 모듈 설치
npm i -D html-webpack-plugin
plugins: [
new HTMLWebpackPlugin({
title: "keyboard",
template: "./index.html",
inject: "body",
favicon: "./favicon.ico"
})
]- inject
번들됐을 때 js 파일을 어디에 넣을 것인지
js가 body 부분에 넣겠다.
CSS 관련 모듈 설치
npm i -D mini-css-extract-plugin css-loader css-minimizer-webpack-plugin
lodash 문법
<!DOCTYPE html>
<html lang="ko">
<head>
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
</body>
</html>lodash 문법을 사용해서 config에 있는 title을 가져다가 html에서 title로 만들어주었다.
빌드 시 production 모드
"scripts": {
"build": "webpack --mode=production"
},
devServer
devServer: {
host: "localhost",
port: 8000,
open: true,
watchFiles: "index.html",
},devServer를 설정해주고
npx webpack-dev-server 를 실행해주면 localhost:8000 으로 포트가 열린다.
해당 명령어도 script로 설정해준다.
ESlint & Prettier
- 설치
npm i -D eslintnpm install --save-dev --save-exact prettier- save-exact option
버전에서npm i했을 때 자동으로 업데이트 해주는 '^' 를 사용하지 않겠다.
정확한 버전을 설치하기를 권장하고 있다.
- save-exact option
npm i -D eslint-config-prettier eslint-plugin-prettier
eslint와 prettier가 충돌되는 것을 비활성화하게 해주는 모듈
- init
npx eslint --init
자신의 프로젝트에 맞춰서 선택해주면 된다.
ESLint
ESLint는 JavaScript 코드에서 발견 된 문제 패턴을 식별하기위한 정적 코드 분석 도구입니다. ESLint의 규칙은 구성 가능하며 사용자 정의 된 규칙을 정의하고로드 할 수 있습니다. ESLint는 코드 품질과 코딩 스타일 문제를 모두 다룹니다.
Prettier
코드 포멧터(Code Formatter)란 개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 변환해주는 도구이다.
ESLint/Prettier ignore
/node_modules
/dist
webpack.config.jsSetting JSON
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}Delete ␍eslintprettier/prettier
이런 에러가 나서 해결하였다.
https://velog.io/@realsong/VS-Delete-prettierprettier-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95
설정이 빡세다.
