YSHUSH

Webpack 개발환경 설정2 본문

Coding/Bundler

Webpack 개발환경 설정2

코딩; 2022. 9. 9. 06:51 
// package.json 초기화
npm init -y

// 웹팩 관련 패키지 설치
npm i -D webpack webpack-cli webpack-dev-server

// 플러그인 설치
npm i -D terser-webpack-plugin

npm i -D html-webpack-plugin

npm i -D mini-css-extract-plugin css-loader css-minimizer-webpack-plugin

 

· 루트경로에 webpack.config.js생성 후

const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-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.ico",
    }),
    new MiniCssExtractPlugin({ filename: "style.css" }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
  },
};

 

· 루트 경로에 index.html 생성 후 lodash문법을 사용할 수 있게 해주는 태그를 <title>태그 안에 작성해준다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
  
  </body>
</html>

 

· index.js 파일 상단에 css파일을 import한다.

 

· package.json -  script부분 수정

  "scripts": {
    "build": "webpack"
  },
  
 // 빌드 할 때는 프로덕션 모드로 하는게 좋다 - 쓸모없는 여백을 없애줌
   "scripts": {
    "build": "webpack --mode=production"
  },

 

· 데브서버 열기

npm run dev

eslint & prettier 설정하기

// eslint 설치
npm i -D eslint

// prettier 설치
npm install --save-dev --save-exact prettier

// 패키지 설치
npm i -D eslint-config-prettier eslint-plugin-prettier

 

// eslint 초기화
npx eslint --init

2. To check syntax and find problems 선택

JavaScript modules 선택

None of these

No

Browser

JSON

 

· 이후 .eslintrc.json 이 생성되는데 이것을 수정해준다

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "prettier/prettier": "error"
  }
}

 

· 루트 경로에 .eslintignore파일을 생성 후

/node_modules
/dist
webpack.config.js

 

prettier 홈페이지 - playground - 좌하단 copy config json을 하면 기본 설정을 복사할 수 있는데

· 루트 경로에 prettierrc.json 파일을 생성하고 복붙해준다.

 

· 루트 경로에 .prettierignore파일 생성 후

/node_modules
/dist
webpack.config.js

 

· cmd + shift + p 누르고 settings 검색한 후 Preferences: Open Workspace Settings (JSON) 선택한 후

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

 

 

'Coding > Bundler' 카테고리의 다른 글

개발환경설정(snowpack)  (0) 2022.09.13
Webpack 프로젝트 초기 구성  (0) 2022.08.31
Parcel - babel  (0) 2022.08.31
'Coding/Bundler' Related Articles more