[WebPack & VanillaJS] 웹팩과 함께하는 바닐라JS 기본 환경 설정

패캠 basic단계에서는 바닐라JS를 통한 간단한 프로젝트를 진행한다. 

지난 게시글에서 알아본 웹팩에 대해 간단하게 알아봤으니 설정을 해보자

우선 node.js은 기본으로 설치되어야 한다.(npm은 자동 설치됨)

다운로드 | Node.js

자 설치까지 끝냈으면 우선 package.json 파일부터 생성하자

npm init -y

그리고 웹팩 관련한 패키지들을 설치한다

npm install -D webpack webpack-cli webpack-dev-server

webpack-cli는 웹팩을 더 쉽게 사용할 수 있도록 하는 터미널 명령어를 제공해주는 패키지이고

webpack-dev-server은 실시간으로 새로고침을 해주는 웹팩의 개발용 서버이다.

 

이제 웹팩을 다루는 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 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({ //html의 압축을 도와주는 플러그인
      title: "keyboard", //웹 타이틀을 설정할 수 있음
      /*html의 title부분에 <%= htmlWebpackPlugin.options.title %>을 입력해 사용 가능 */
      template: "./index.html",
      inject: "body", //자바스크립트 파일을 어디에 넣을 것인지?
      favicon: "./favicon.png",
    }),
    new MiniCssExtractPlugin({ filename: "style.css" }), //css파일을 html파일에 넣어주기 위한 플러그인
  ],
  module: {
    rules: [
      {
        test: /\.css$/, //css파일을
        use: [MiniCssExtractPlugin.loader, "css-loader"], //해당 로더를 사용해서 읽겠다는 뜻
      },
    ],
  },
  optimization: { //압축 플러그인 npm으로 설치해야함
    minimizer: [
      new TerserWebpackPlugin(), //얘를 통해서 js를 압축
      new CssMinimizerplugin(), //css를 압축시켜줌
    ],
  },
};

일단 하라는 대로 이렇게 만들었다. 각 불러들인 파일들은 npm을 통해 설치하면 된다.

작동이 잘되는지 확인하기 위해선 터미널에 npx webpack 을 실행하면 된다. 

- 물론 해당 css, js, html 파일을 만들어 놔야 한다.

이렇게

그리고 dist폴더에 파일이 압축이 잘 된다면 성공!

또한 npx webpack-dev-server를 실행하면 화면이 나오는 걸 확인할 수 있다.

 

다음으로는 eslint와 prettier에 대해 알아보자