webpack에서 프로젝트 생성(에셋 관리)

Getting Started
Asset Management (← 이번에는 이것)
Output Management
개발

마지막으로 만든 프로젝트에 이미지와 같은 자산을 추가합니다.

추가한 자산이 페이지에 어떻게 표시되는지 순서대로 이해합니다.

CSS 파일을 읽을 때까지의 흐름

JS 파일 내에서 CSS 파일을 읽는 흐름은

HTML 출력 태그를 bundle.js로 변경

CSS 용 lodash 설치

webpack.config.js에서 bundle.js를 출력하고 로더로드

여기까지 아래 준비 완료.

style.css 만들기

index.js에서 style.css를 읽고 CSS 클래스로 출력

진입점 변경

이전 프로젝트에서 index.js를 진입점으로 만들고 main.js를 출력을 만들었지만 bundle.js로 변경합니다.

webpack.config.js의 output에 기술한 파일은 자동 생성된다.

CSS용 로더 설치

로더를 설치하면 .css 파일을 js에 로드할 수 있습니다.

npm install --save-dev style-loader css-loader

· --save-dev : devDependencies로 설치
· style-loader : JS의 CSS를 HTML로 출력
· css-loader : JS 내에서 CSS를 사용할 수 있습니다. 편리한 옵션 설정도 있다.

webpack.config.js 변경

설치한 loader를 사용하기 위해 webpack.config.js 파일에 추가한다.

   module: {
     rules: [
       {
         test: /\.css$/,
         use: [
           'style-loader',
           'css-loader',
         ],
       },
     ],
   },
  };

loader는 체인으로 연결되어 webpack이 모든 것을 읽은 후에 실행된다.

그 때문에 module 옵션안에 기술하는 loader의 순서가 중요해, style-loader, css-loader의 순서가 아니면 에러가 된다.

CSS 파일 만들기

src/style.css를 만들고 간단한 코드를 추가합니다.

src/index.js로 css 가져오기

npm run build에서 webpack을 다시로드합니다.

dist/index.html을 열면 "Hello webpack"이 빨간색으로 표시됩니다.

이미지 로드용 로더 설치

npm install --save-dev file-loader

webpack.config.js에서 file-loader를로드합니다.

module 옵션의 rules 안에 다음을 추가한다.

webpack.config.js

       {
         test: /\.(png|svg|jpg|gif)$/,
         use: [
           'file-loader',
         ],
       },

이것을 기술함으로써, 화상 파일이 판독되어 dist 디렉토리에 출력된다. 해시 값으로 출력됩니다.

이미지 파일 추가 및 로드

src 디렉토리에 이미지를 추가하고 index.js에 출력을 추가합니다.

CSS에 배경 이미지로 추가

src/style.css

 .hello {
    color: red;
   background: url('./icon.png');
  }

npm run build
재로드. dist/index.html을 열면 배경 이미지가 표시됩니다.

글꼴 로딩

방금 전에 이미지를 읽은 file-loader는 이미지 이외의 파일도 읽을 수 있습니다.

test로 읽을 파일을 정규식으로 지정합니다.
module의 rules에 다음을 추가한다.

webpack.config.js

       {
         test: /\.(woff|woff2|eot|ttf|otf)$/,
         use: [
           'file-loader',
         ],
       },

글꼴용 폴더 만들기

css 파일에 글꼴을 추가합니다.

src/style.css

 @font-face {
   font-family: 'MyFont';
   src:  url('./my-font.woff2') format('woff2'),
         url('./my-font.woff') format('woff');
   font-weight: 600;
   font-style: normal;
 }

  .hello {
    color: red;
   font-family: 'MyFont';
    background: url('./icon.png');
  }

데이터 로딩

JSON, CSV, XML 파일의 데이터를 로딩할 수 있다.

이번에는 csv와 xml 로더를 설치합니다.
평소와 같이 로더를 설치하면 webpack.config.js의 module 옵션의 rules에 test, use, loader 이름을 추가한다.

npm install --save-dev csv-loader xml-loader

webpack.config.js

      {
         test: /\.(csv|tsv)$/,
         use: [
           'csv-loader',
         ],
       },
       {
         test: /\.xml$/,
         use: [
           'xml-loader',
         ],
       },

샘플용 xml을 준비한다.

src/data.xml

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Mary</to>
  <from>John</from>
  <heading>Reminder</heading>
  <body>Call Cindy on Tuesday</body>
</note>

src/index.html로 가져오기

components 디렉토리 만들기

이제 느낌은 있지만 직관적인 알기 쉬움을 위해 브라우저 표시에 사용되는 데이터를 assets에서 components 폴더로 이동합니다.

외부 데이터의 취득 방법은 이상.
패키지를 인스톨 해, config 파일로 읽어들여, index.js 파일에 기술하는 것이 기본적인 흐름이 된다.

Reference

이 문제에 관하여(webpack에서 프로젝트 생성(에셋 관리)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/shizen-shin/items/36ffc62bbe1039df4b4a

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

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

webpack에서 프로젝트 생성(에셋 관리)

webpack에서 프로젝트 생성(에셋 관리)

CSS 파일을 읽을 때까지의 흐름

진입점 변경

CSS용 로더 설치

webpack.config.js 변경

CSS 파일 만들기

src/index.js로 css 가져오기

이미지 로드용 로더 설치

webpack.config.js에서 file-loader를로드합니다.

이미지 파일 추가 및 로드

CSS에 배경 이미지로 추가

글꼴 로딩

글꼴용 폴더 만들기

css 파일에 글꼴을 추가합니다.

데이터 로딩

샘플용 xml을 준비한다.

src/index.html로 가져오기

components 디렉토리 만들기

Reference

좋은 웹페이지 즐겨찾기