💻 개발환경 세팅하기 - Webpack

이혜란·2023년 1월 15일

기타 자료 공유

목록 보기

3/7

module bundler는 웹개발에 필요한 파일들을 병합+압축합니다.

새로운 폴더 생성 후 폴더를 열고 터미널에서 npm init -y 로 시작하면 package.json 파일이 생성됩니다.

다음으로 webpack 관련 패키지들을 설치합니다.
npm i -D webpack webpack-cli webpack-dev-server 여기서 -D 는 devDependencies 패키지를 설치하겠다는 명령어입니다. devDependencies 는 로컬 개발이나 테스트시에 필요한 패키지를 말합니다.

webpack.config.js 파일을 생성하고, 압축 플러그인을 설치합니다.
자바스크립트 파일을 압축해주는 npm i -D terser-webpack-plugin 명령어를 입력해 설치합니다.

npx webpack 명령어를 터미널에 입력하여 실행시켜 주면 dist 폴더 안에 bundle.js 파일이 생성됩니다.

css와 html 파일을 설정해 줄 모듈을 아래 코드를 입력해 설치해줍니다.
npm i -D html-webpack-plugin , npm i -D mini-css-extract-plugin css-loader css-minimizer-webpack-plugin

config.js 파일 안에 아래의 코드를 작성하여 세팅해줍니다.

const path = require("path"); // path모듈 불러오기
const TerserPlugin = require("terser-webpack-plugin"); //압축 플러그인 불러오기
const HtmlWebpackPlugin = require("html-webpack-plugin"); // html 플러그인 불러오기
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // css 플러그인 불러오기
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); // css 압축 플러그인

module.exports = {
  entry: "./src/js/index.js", // js 파일의 진입점
  output: {
    //빌드했을 때 번들파일 관련 속성
    filename: "bundle.js", // 번들파일 이름
    path: path.resolve(__dirname, "./dist"), // 번들파일 생성될 절대 경로지정
    clean: true, // 경로에 이미 파일이 있다면 지우고 다시 생성하는 속성
  },
  devtool: "source-map", // 빌드한 파일과 원본파일을 연결
  mode: "development", // 난독화 기능을 제공하는지 차이 production
  plugins: [
    new HtmlWebpackPlugin({
      title: "keyboard",
      template: "./index.html", //빌드할 파일, lodash 문법 사용가능하게 해줌
      inject: "body", // 자바스크립트를 넣어줄 부분, 기본설정은 head
      favicon: "./favicon.png",
    }),
    new MiniCssExtractPlugin({ filename: "style.css" }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/, // css 파일을 loader를 통해 읽어들임
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [
      new TerserPlugin(), // 자바스크립트 파일 압축
      new CssMinimizerPlugin(), // css 파일 압축
    ],
  },
};

  <head>
    <title>
      <!-- 📌 lodash 문법 -->
      <%= htmlWebpackPlugin.options.title %>
    </title>
  </head>

package.json 파일의 script 부분에 아래의 코드를 입력해준 후 npm run build 명령어를 실행시켜 주면 빌드가 됩니다.

"scripts": {
  "build" : "webpack --mode=production",
  "dev": "webpack-dev-server" // npm run dev
},

다음은 dev 서버를 넣어주는 설정을 하는법 입니다.
webpack.config.js 파일에 아래의 코드를 추가해 줍니다.

devServer: {
  host: "localhost",
  port: 8080,
  open: true,
  watchFiles: "index.html", // html 파일 변화 감지, 자동 리프레시
},

터미널에 npx webpack-dev-server 명령어를 입력해주면 dev server 페이지가 열리게됩니다.

이혜란

이전 포스트

Mac node default 버전 바꾸기

다음 포스트

💻 개발환경 세팅하기 - Webpack

기타 자료 공유

Mac node default 버전 바꾸기

💻 개발환경 세팅하기 - eslint, prettier

0개의 댓글