webpack으로 모형을 효율적으로 만들 수 있습니까? ?

Wordpress 사이트를 만드는 너구리입니다.
사람에 따라 만드는 방법은 다양하다고 생각합니다만, 제 경우에는, 우선 HTML·CSS로 완벽하게 완성하고 나서, Wordpress 사이트의 형태로 해 갑니다.

그 HTML·CSS의 사이트를 만들 때, 어쨌든 수고가 귀찮다. header라든지 footer라든지, 페이지마다 만들지 않고, 한결 정리하고 싶다.

그렇게 생각하면 친구가 "webpack을 사용하면 좋겠다"고 가르쳐 주었습니다.

무엇? webpack??

신경이 쓰여져, 이 책을 구입. 『 속습 webpack 속습 시리즈 』
이 책에서 배운 것을 Qiita에 써 가려고 생각합니다.

webpack이란?

webpack이란,

Java Script 모듈 번들러.

함수 또는 클래스별로 세분화된 모듈(파일)을 하나로 정리해 준다.

게다가 로딩의 순서도 좋은 느낌으로 해석해 정리해 준다

...것이라고 합니다.
webpack에 의해, 파일을 세세하게 분할해 작성해, 정리할 수도 있으므로, 파일의 전망도 좋은 리마스. 또, 이름 공간도 분할할 수 있으므로, 이름의 경합도 막습니다.

게다가, 로더(리소스를 읽어들이기 위한 라이브러리)를 추가하는 것으로, HTML이나 CSS나 이미지 파일도 번들 할 수 있습니다.

webpack 사용법

준비(Node.js 및 npm 설치)

webpack을 사용하려면 먼저 Node.js가 필요합니다.

이 사이트 에서 설치할 수 있으며 mac의 경우 다음 명령으로 Node.js를 설치할 수 있습니다.

# homebrewをインストール
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

# nodebrewをインストール
$ brew install nodebrew

# Node.jsをインストール
$ nodebrew install-binary stable

Node.js를 설치할 수 있는지 확인하려면 $ npm -v에서 npm 버전이 확인되면 프로젝트 폴더로 이동하여 다음 명령으로 구성 파일을 생성합니다.

$ cd プロジェクトのルート
$ npm init -y

npm init -y 의 -y 옵션은, 「모두 규정의 값으로 package.json 을 생성한다」라고 하는 의미입니다.

webpack 설치

webpack을 설치하려면 npm 명령을 사용합니다.

$ npm install --save-dev webpack webpack-cli

--save-dev 옵션은, 「설치하는 패키지의 정보를 package.json에 기록한다」라고 하는 의미입니다.
이 명령은 package-lock.json라는 파일을 생성합니다.

파일 준비

지금까지 자동으로 생성된 파일에 몇 가지 파일을 추가합니다. 여기까지의 프로세스로 자동 생성된 파일과, 스스로 추기한 파일을 맞춘, 폴더 구조는 이쪽입니다

.
├── modules
│    ├ module-A.js ★
│    └ module-B.js ★
├── entry.js ★
├── index.html ★
├── output.js
├── node_modules
└── package.json

★는 수동으로 생성한 파일, 그 외는 자동 생성의 파일입니다. 이때 module-A.js 와 module-B.js 의 내용을 entry.js 에 통합하고 output.js 를 통해 index.html 에 표시하려고 합니다.

이때, 수동으로 생성한 각 파일에 써 있는 내용은 이쪽입니다.

module-A.js

console.log('moduleA がインポートされました');

module-B.js

console.log('moduleB もインポートされました');

entry.js

import * as moduleA from './modules/module-A';
import * as moduleB from './modules/module-B';

console.log('これは、エントリーポイントのあるファイルです');

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="output.js"></script>
  <title>Document</title>
</head>
<body>
  <p>hello! webpack!</p>
</body>
</html>

설정 파일을 작성하는 방법

webpack.config.js 를 프로젝트 바로 아래에 직접 준비합니다. 그리고, 이하의 내용을 기재합니다.

webpack.config.js

module.exports = {
  // 1.エントリーポイント
  entry: './entry.js',
  output: {
    //2.出力先のフォルダ
    path: `${__dirname}`,
    //3.出力先ファイル名
    filename: 'output.js'
  },
};

$ npx webpack

그러면 output.js 가 자동 생성되고 index.html (의 콘솔)에는 다음 내용이 출력됩니다.

module-A.js 와 module-B.js 의 내용이 entry.js 에 모여 output.js 를 통해 index.html 에 표시되었습니다.

webpack은 이대로는 그다지 활용의 의미를 이해하기 어렵습니다만, Jquery를 정리하거나, 아이콘을 정리하거나, CSS를 정리하는 등, 활용의 포인트가 많이 있는 것 같습니다.
아직 공부중이지만 편리한 사용법을 알면 수시로 발신하고 싶습니다.

Reference

이 문제에 관하여(모형을 효율적으로 만들고 싶다 : webpack을 도입해 보았다 ①), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tanutanu/items/4b215b66e042ffe96455

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

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

모형을 효율적으로 만들고 싶다 : webpack을 도입해 보았다 ①