[최종] 바닐라 javaScript 세팅

webpack (babel + sass + img + html)  + eslint + preitter

 

// package json 생성

npm init -y

// webpack 설치

npm install --save-dev webpack webpack-cli

// babel 관련 설치

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/plugin-transform-runtime babel-loader

npm install core-js@3 @babel/runtime-corejs3

// scss 관련 설치

npm install --save-dev sass css-loader sass-loader

npm install --save-dev mini-css-extract-plugin

// img 파일

npm i -D file-loader

// html 플러그인

npm i -D html-webpack-plugin

 

package.json 확인

- scripts 수정 / 설치 확인

{

  "name": "fesetting",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "build": "webpack -w"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "@babel/cli": "^7.24.8",

    "@babel/core": "^7.25.2",

    "@babel/plugin-transform-runtime": "^7.24.7",

    "@babel/preset-env": "^7.25.3",

    "babel-loader": "^9.1.3",

    "css-loader": "^7.1.2",

    "file-loader": "^6.2.0",

    "html-webpack-plugin": "^5.6.0",

    "mini-css-extract-plugin": "^2.9.0",

    "sass": "^1.77.8",

    "sass-loader": "^16.0.0",

    "style-loader": "^4.0.0",

    "webpack": "^5.93.0",

    "webpack-cli": "^5.1.4"

  },

  "dependencies": {

    "@babel/runtime-corejs3": "^7.25.0",

    "core-js": "^3.38.0"

  }

}

 

.babelrc 생성

{

    "presets": ["@babel/preset-env"]

}

 

webpack.config.js 생성

const path = require('path');

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

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

module.exports = {

    mode: 'development', // development || production

    entry: ['./src/js/main.js', './src/sass/main.scss'], // 시작점

    output: {

        path: path.resolve('./dist'), // 저장 경로

        filename: 'js/[name].js' // 이름

    },

    plugins: [

        new MiniCssExtractPlugin({ filename: 'css/[name].css' }),

        new HtmlWebpackPlugin({

            template:'./src/index.html'

        })

      ],

    module: {

        rules: [

       

        // babel

        {

            test: /\.js$/,

            include: [

                path.resolve('./src/js')

            ],

            use: {

                loader: 'babel-loader',

                options: {

                    presets: ['@babel/preset-env'],

                    plugins: [

                        [

                          '@babel/plugin-transform-runtime',

                          {

                            corejs: 3,

                            proposals: true,

                          },

                        ],

                      ],

                }

            },

            exclude: /node_modules/

        },

        // scss

        {

            test: /\.scss$/,

            use: [

                MiniCssExtractPlugin.loader,

                "css-loader",   // translates CSS into CommonJS

                "sass-loader"   // compiles Sass to CSS, using Node Sass by default

            ],

            exclude: /node_modules/

        },

        // img

        {

            test:/\.png$/,

            use: [

                {

                    loader: 'file-loader',

                    options: {

                        name: 'img/[name].[ext]'

                    }

                }

            ],

            exclude :/node_modules/

        },

        ]

    },

    devtool: 'source-map',

};

 

---

eslint + preitter 추가 (airbnb)

// eslint airbnb

npx install-peerdeps --dev eslint-config-airbnb 

// prettier

npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier

 

// parser update

npm install --save-dev @babel/eslint-parser

 

.eslintrc.js 생성

airbnb , recommended 원하는 스타일에 따라 주석처리 

// .eslintrc.js

module.exports = {

  parser: '@babel/eslint-parser',

  parserOptions: {

    requireConfigFile: false,

    ecmaVersion: 2022, // ES2022 기능 지원

    sourceType: 'module',

  },

  extends: [

    // 'airbnb-base',

    'eslint:recommended',

    'plugin:prettier/recommended', // Prettier 관련 규칙 추가

  ],

  env: {

    browser: true,

    node: true,

    es2021: true,

  },

  rules: {

    'no-console': 'off',

    'prettier/prettier': [

      'error',

      {

        endOfLine: 'auto',

      },

    ],

    'no-unused-vars': 'warn', // 사용하지 않는 변수 : warn 경고 || off 끄기

  },

};

 

.prettierrc 생성

{

    "singleQuote": true,

    "semi": true,

    "useTabs": false,

    "tabWidth": 2,

    "trailingComma": "all",

    "printWidth": 80,

    "arrowParens": "avoid"

}

---

폴더 구조

 

---

 

error 처리

import , export 관련 

  parserOptions: {

    sourceType: 'module',

  }

 

사용하지 않는 변수

rules: {

    'no-unused-vars': 'warn', // 사용하지 않는 변수 : warn 경고 || off 끄기

  },

 

자동 저장시 작동하게 했지만, vscode 가 가끔 먹통이 되기도 하는데.. 클릭하면 지워주기도함..