디자인너 코딩하기

WebPack을 포함한 기본 설정 본문

프론트/webpack

WebPack을 포함한 기본 설정

designercoding 2022. 4. 20. 19:40

1

새로운 폴더를 만든다

 

2

npm init -y 실행

package.json파일 생성 확인

→ package.json 초기화

 

3

npm i -D webpack webpack-cli webpack-dev-server

i는 install

-D 개발환경, 테스트, 로컬환경 사용용(devDependencies)

webpack, webpack-cli, webpack-dev-server 세 가지를 개발환경에서만 사용하는 용도로 인스톨

node_modules 폴더와 package-lock.json 파일 목록생성 및 버젼 확인

 

4

src 폴더 생성

src 폴더와 하위에 css폴더와 css폴더하위에 style.css파일과 js폴더와 js폴더 하위에 index.js파일을 생성

 

5

webpack.config.js파일 생성

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/js/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./dist"),
    clean: true,
  },
  devtool: "source-map",
  mode: "development"
};

entry → js의 진입점(시작)

output  → output시 번들파일들을 관리하는 속성

filename → 번들파일 이름을 지정

path  → 번들파일경로(webpack에서 상대경로로 찾을 수 없어 const path = require("path")로 절대경로로 변환

clean: true  → 기존 파일이 있다면 다 삭제 후 새로 생성

devtool: "source-map"  → 빌드한 파일과 원본파일을 연결

mode   → html, css, js 파일에 대한 난독화 기능에 따라 productionr과 development로 구분

 

6

npm i -D terser-webpack-plugin

추가 압축기능(자바스크립트 최소화)

webpack.config.js

const path = require("path");
const TerserPlugin = require("terser-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",
  optimization: {
    minimizer: 
      new TerserPlugin(),
  }
};

npx webpack 을 실행하면

dist폴더에 bundle.js가 생성된다.

devtool: "source-map"  → dist폴더에 bundle.js.map

 

7

최상위 경로에 index.html파일 생성

 

8

npm i -D html-webpack-plugin

html파일 설정 모듈

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

css파일 설정 모듈

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",
  plugins: [
    new HtmlWebpackPlugin({
      title: "webpack setting",
      template: "./index.html",
      inject: "body",
      favicon: "./favicon.ico",
    }),
    new MiniCssExtractPlugin({ filename: "style.css" }),
  ],
  optimization: {
    minimizer: [
      new TerserPlugin(),
      new CssMinimizerPlugin(),
    ],
  },
};

new HtmlWebpackPlugin

  • title → 브라우져 탭 상단에 브라우져 타이틀
  • template → 최상위 경로의 index.html를 사용, index.html 안에서 lodash 문법 사용 가능해짐
    lodash 는 자바스크립트에서 유용하게 사용할 수 있는 유틸리티 라이브러리
    빈문자열 체크부터 다양한 기능을 갖고있는 배열과 오브젝트를 위한 유용한 유틸리티
    예전에는 isEmply 나 isNull 같은 함수를 만들어서 사용했지만 이제 로대시 하나로 해결
    -> 필수 라이브러리
  • inject : "body" → 빌드했을때 js를 넣을 곳을 지정 / 기본값은 헤드

new TerserPlugin() → 이 플러그인은 terser(간결) 를 사용하여 JavaScript를 최소화/최소화

new CssMinimizerPlugin() → css 압축

 

index.html

  <head> 
    <title>
      <%= htmlWebpackPlugin.options.title %>
    </title>
  </head>

 

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",
  plugins: [
    new HtmlWebpackPlugin({
      title: "webpack setting",
      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(),
    ],
  },
};

module 내용은 .css 파일을 use에 MiniCssExtractPlugin 로더로 읽어옴

npx webpack 시 에러가 있다면 index.js나 style.css, favicon.ico가 있는지 확인

 

9

css 파일 로딩

index.js

import "../css/style.css";

 

10

dev Server

package.json

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

npm run dev  → webpack dev 서버 실행

build는 프로덕션 모드 (압축)

 

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: 9090,
    open: true,
    watchFiles: "index.html",
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "webpack setting",
      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(),
    ],
  },
};

  devServer: {
    host: "localhost",
    port: 9090,
    open: true,
    watchFiles: "index.html",
  },

 

open: true → dev-Server 실행시 새 창에서 실행

watchFiles: "index.html" → index.html 변화를 감지하여 변화가 있을 시 자동 리로드

반응형
저작자표시 (새창열림)

'프론트 > webpack' 카테고리의 다른 글

eslint & prettier  (0) 2022.04.20
'프론트/webpack' Related Articles more