[프론트엔드] 가상키보드

1. 환경설정 

• webpack 설치

 

• webpack.config.js 작성

const path=require("path");
const TerserWebpackPlugin= require('terser-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

 module.exports={
    entry: "./src/js/index.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname,"./dist"),
        clean: true
    },
    devtool: "source-map",
    mode: "development",
    devServer:{
        host: "localhost",
        port: 8080,
        open: true,
        watchFiles: 'index.html'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "keyboard",
            template: "./index.html",
            inject: "body",
            favicon: "./favicon.png"
        }),
        new MiniCssExtractPlugin({filename:"style.css"})
    ],
    module:{
        rules:[
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            }
        ]
    },
    optimization:{
        minimizer:[
            new TerserPlugin(),
            new CssMinimizerPlugin()
        ]
    }
}

• 폴더 생성 및 경로확인

• package.json 에 설치된 버전 확인

{
  "name": "virtual-keyboard",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode=production",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.7.1",
    "css-minimizer-webpack-plugin": "^4.0.0",
    "eslint": "^8.23.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.1",
    "prettier": "2.7.1",
    "terser-webpack-plugin": "^5.3.6",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.10.1"
  }
}

 

• eslint&prettier 설치 및 초기설정