Bundler[Webpack] - 정적 파일 연결

01.정적 파일 연결

본인이 프로젝트에 연결되었으면 하는 파일을 개발 서버를 열거나 제품화 시킬 때 직접 웹페이지에 연결되는 dist 폴더로 자동으로 넣어줄 수 있는 패키지를 의미 합니다.

02.static 폴더 생성

프로젝트 내에 static 폴더를 생성해줍니다.
해당 폴더에 파비콘 파일을 넣어줍니다.

03.images 폴더 생성

static 폴더 내에 images 폴더를 생성합니다.
images 폴더안에 파비콘 파일의 원본 이미지인 logo.png 파일을 넣어주도록 하겠습니다.

04.logo.png 파일 연결

index.html
<body>
    <h1>Hello Webpack!</h1>
    <img src="./images/logo.png" alt="HEROPY">
</body>
images 폴더에 넣어준 파일이 제대로 동작하는 것을 확인하기 위해 index.html에 해당 내용을 코딩해줍니다.

05.정적 파일 연결

5-1.패키지 설치 & 확인

$ npm install -D copy-webpack-plugin

package.json 파일

"devDependencies": {
    "copy-webpack-plugin": "^9.1.0",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.0.0-rc.1"
  }

5-2.webpack.config.js 파일 설정

const CopyPlugin = require('copy-webpack-plugin')

plugins: [
  new CopyPlugin({
    patterns: [
      { from: 'static' }
    ]
  })
]

webpack.config.js 파일

// import
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");

// export 
module.exports = {
  // parcel index.html
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: "./js/main.js",
  // 결과물(번들)을 반환하는 설정
  output: {
    // path: path.resolve(__dirname, "dist"), // dist의 절대경로를 반환
    // filename: "main.js",
    clean: true
  },

  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인을 설정
  plugins: [
    new HtmlPlugin({
      template: "./index.html"
    }),
    new CopyPlugin({
      patterns: [
        { from: "static" } // static 폴더안에 있는 내용들이 복사되어 dist폴더 안에 들어갈 수 있게 설정하는 옵션
      ]
    })
  ],

  devServer: {
    host: 'localhost'
  }
}

프로젝트 내에 만들었던 static 폴더 안에 있는 내용을 새로 설치한 CopyPlugin 패키지를 통해 복사가 되어 dist 폴더에 들어갈 수 있도록 해줍니다.

5-3.개발 서버 오픈

$ npm run dev

5-4.개발 서버 오픈 에러

개발 서버 오픈 에러 메시지

개발 서버를 오픈 했을때 이와 같은 에러 메시지가 출력될 수 있습니다.

개발 서버 오픈 에러 원인

해당 에러 메시지의 원인은 node 버전이 12.20보다 낮거나 copy-webpack-plugin버전이 9보다 높으면 버전 문제로 이런 에러가 발생합니다.

개발 서버 오픈 에러 해결방안

node버전을 12.20이상 설정 해주던가 아니면 copy-webpack-plugin버전을 9보다 낮게 설정 해주면 해결 됩니다.

node 버전 확인 명령어: node -v

저는 해당 블로그를 참고하여 에러를 해결 했습니다. 개발 서버 오픈 에러 참고 사이트

참고로 저는 copy-webpack-plugin버전을 10에서 9로 줄여서 해결 했습니다.

다시 개발 서버를 오픈해서 확인해보면 이미지와 파비콘 파일이 잘 실행됨을 확인할 수 있습니다.

Author And Source

이 문제에 관하여(Bundler[Webpack] - 정적 파일 연결), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wlsdnjs156/BundlerWebpack-정적-파일-연결

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)