[Rails] Webpacker gem은

Webpacker 소개

Webpacker는gem의 이름입니다. "Webpack"을 가져왔습니다.
간단하게 말하면 자바스크립트의 구축 도구인'Webpack의 자물쇠로 인해 Webpack 라일스에서 자바스크립트 개발에 필요한 일련의 통합gem를 실현할 수 있다.
또한 Webpacker는 Rails6 표준 장비의

Webpack 소개

원래 Webpack은 CSS, 자바스크립트, 이미지 등 제작 프로그램의 부품 자산을 하나의 파일로 정리한 것이다. 비슷한 구조로 Sprockets(자산 라인)가 존재한다.
※ Sprockets는 자산 파이프라인을 지탱하는 근간gem

Webpacker의 특징

Webpack의 명령을 Rake 임무로 패키지 및 제공

Babel을 통한 ES2015 코드 컴파일

React/Vue.js/Anglar 등 지원

Rails 뷰 도우미 제공

Webpacker 및 Sprockets

방금 나왔는데 Rails는 표준이고 Webpack과 비슷한 구조로 Sprockets가 존재하는데 모두 (자산관)
양자가 해결해야 할 영역은 비슷하다
따라서 어느 쪽에서 JS를 관리할 것인지를 선택할 필요가 있다. 그러나 Sprockets는 서서히 낡아가는 구조이기 때문에 최근 웹 패키지를 사용하는 것이 주류가 되고 있다.
다음 표는 양자의 대응 관계이다
과업
Sprockets
Webpacker
JavaScript 포함
javascript_include_tag
javascript_pack_tag
첨부 CSS
stylesheet_link_tag
stylesheet_pack_tag
이미지에 링크
image_url
image_pack_tag
자산에 연결
asset_url
asset_pack_tag
스크립트 다시 쓰기
//= require
import 또는 require

개발자 환경에서 Webpacker 실행

Webpacker는 개발자 환경에서 실행되는binstub 파일 두 개를 첨부합니다

./bin/webpack

./bin/webpack-dev-server

이 binstub 파일들은 표준 실행 파일입니다.js와 웹팩-dev-server.js의 얇은 자물쇠입니다. 환경에 따라 적당한 설정 파일과 환경 변수를 읽을 수 있습니다.
기본적으로, Rails 페이지가 읽히면 개발자 환경의 Webpacker는 필요에 따라 자동으로 컴파일됩니다.즉, 다른 프로세스를 수행할 필요가 없으며 컴파일 오류가 표준 Rails 로그로 출력됩니다.
이것을 변경하려면 config/webpacker.yml 파일을 compile: false로 변경하십시오.bin/webpack를 실행하면 패키지를 강제로 컴파일합니다.
코드의 실시간 리셋 기능을 사용하거나 JavaScript 코드가 많아 팟캐스트 컴파일링이 느려지려면 ./bin/webpack-dev-server이 필요합니다.pack-dev-server 프로세스 감시app/javascript/packs/*.js 파일의 변경, 변경 시 자동으로 다시 컴파일하여 브라우저를 다시 불러옵니다.

/bin/webpack 명령

JavaScript 및 CSS 등의 명령 컴파일
예제)

$ ./bin/webpack
Hash: 3830cdcdec9d79c60330
Version: webpack 4.41.5
Time: 3823ms
Built at: 2021-08-07 17:05:02
                                      Asset      Size        Chunks                         Chunk Names
     js/application-981d57ca76e124dd3932.js   4.4 KiB   application  [emitted] [immutable]  application
 js/application-981d57ca76e124dd3932.js.map  4.14 KiB   application  [emitted] [dev]        application
    js/edit_article-bbb653b98e63c72de324.js  1.75 MiB  edit_article  [emitted] [immutable]  edit_article
js/edit_article-bbb653b98e63c72de324.js.map  2.04 MiB  edit_article  [emitted] [dev]        edit_article
     js/hello_react-60a3a1c0039aa9665dd4.js  1.19 MiB   hello_react  [emitted] [immutable]  hello_react
 js/hello_react-60a3a1c0039aa9665dd4.js.map  1.37 MiB   hello_react  [emitted] [dev]        hello_react
                              manifest.json  1.02 KiB                [emitted]              
Entrypoint application = js/application-981d57ca76e124dd3932.js js/application-981d57ca76e124dd3932.js.map
Entrypoint edit_article = js/edit_article-bbb653b98e63c72de324.js js/edit_article-bbb653b98e63c72de324.js.map
Entrypoint hello_react = js/hello_react-60a3a1c0039aa9665dd4.js js/hello_react-60a3a1c0039aa9665dd4.js.map
[./app/javascript/articleBlockEditor/editor.js] 4.07 KiB {edit_article} [built]
[./app/javascript/articleBlockEditor/index.js] 957 bytes {edit_article} [built]
[./app/javascript/packs/application.js] 514 bytes {application} [built]
[./app/javascript/packs/edit_article.js] 33 bytes {edit_article} [built]
[./app/javascript/packs/hello_react.jsx] 1.17 KiB {hello_react} [built]
    + 16 hidden modules

bin/webpack-dev-server

로컬 환경의 개발로 js와 css 등의 코드가 변경되었을 때, 매번 상기한 /bin/webpack를 실행하지 않아도 이 서버를 미리 시작하면 자동으로 변경 사항이 브라우저에 반영됩니다
구축된 것만 메모리에 저장하기 때문에 무거워질 수 있습니다rails s 별도의 부팅 필요

bin/webpack-dev-server

rails s

JS 작업

웹 패키지로 js를 처리할 때 app/javascript/packs/에 자바스크립트 패키지 (application.js)를 설치하고 방금 명령으로 컴파일해야 합니다

$ ./bin/webpack

또한 보기에서 컴파일된 자바스크립트 패키지(lication.js 적용)를 사용할 때 아래 명령을 사용해야 한다.

javascript_pack_tag '<pack名>'

참고로 http 방법의 delete가 움직이지 않는 상황에서 이 js의 사전 컴파일링이 좋지 않을 수 있으니 한번 실행해 보세요$ ./bin/webpack

참고 자료

Rails6: Webpacker+Yarn+Sprockets를 충분히 이해하고 자바스크립트: 전편(번역) ｜TechRacho(Techlacho)~엔지니어의"?“！”~|BPS주식회사
Webpacker의 개요 - Rails 설명서
만약 Webpacker를 사용한다면 적어도 이것만은 알았으면 좋겠어요.