p5.js의 개발 환경을 webpack4를 사용해 정돈한다

p5.js의 개발 환경의 선택사항으로서는, OpenProcessing 와 같은 web상의 에디터를 사용하는지, 스스로 준비할지 어느 쪽인가가 될 것이라고 생각합니다. 직접 준비하는 경우 p5-manager 이라는 편리한 라이브러리가 있고 기본적으로는 이 p5-manager를 사용하여 개발 환경을 정돈하면 자신의 에디터상에서 개발할 수 있는 데다 watch 기능도 있다 그래서 소스를 편집하자마자 핫 리로드되어 꽤 편리합니다.

웹 사이트에 통합하고 싶습니다.

이 p5-manager의 환경에서도 웹 사이트를 만들 수 있다고 생각합니다만, css나 es6로 클래스를 사용해 개발해 가는 것은 부족합니다. 거기서 webpack과 es6로 개발할 수 있는 환경을 정돈하기 위해 좋은 것 같은 것이 여기 GitHub 에 있었습니다. 복제하고 사용해 보았는데, 문제없이 사용할 수 있었으므로, 잠시 이것을 사용해 개발하고 있어, 막상 GitHub에 업 해 보면, GitHub상에서 이하의 경고를 받았습니다.



보안의 치명적인 취약성이 발견되었다는 경고이지만, 어디가 문제였는가 하면, webpack의 버전이 너무 오래된 것이 원인이라고 합니다.

webpack4를 지원하는 환경을 사용해보십시오.

webpack에 대해서는 개념 정도의 지식밖에 없었으므로, 이것을 계기로 공부하면 최신 버전의 webpack4에 대응한 환경을 시험해 보았습니다. 구축시에 참고로 한 사이트는 본가 문서 입니다. 그 외, webpack에 대해서는 여러분의 기사를 참고로 했습니다.

취약성이 있던 리포지토리의 webpack.config.js 의 구성을 보면서 무엇이 필요한지를 씻어 나가면(자), 구성적으로는 이하와 같은 구성으로, 옵션에 있는 항목을 webpack의 문서로부터 참조해 config 파일을 만들었습니다.


옵션
나름대로의 해석


entry
변환 대상 js 파일

output
변환된 데이터의 출력처. webpack 명령으로 출력됩니다.

module
js 모듈 이외의 처리 및 다른 종속 종속성을 포함하는 처리. 여기서는 style-loader와 같은 모듈을 사용하여 scss 처리를 즉시 적용하도록 설정

devServer
개발용 설정. 포트 번호와 watch 할 디렉토리의 지정.

플러그인
js 이외의 파일 변환 등을 수행하는 설정 assets의 데이터 복사 및 HTML 내보내기. html은 bundle.js가 읽힌 상태로 출력된다.

오류로 고통받는

webpack 사이트의 설정대로 config에 써도 오류가 발생하여 좀처럼 개발 환경이 정돈되지 않았습니다. 특히 plugins 설정에서

Tapable.plugin is deprecated. Use new API on `.hooks` instead

이러한 오류가 발생하거나

compilation.mainTemplate.applyPluginsWaterfall is not a function
    at /var/www/myproject/node_modules/html-webpack-plugin/lib/compiler.js:81:

이런 에러가 나오고, 왜 본가와 같은 설정인데 할 수 없는 것이다. . . 와 의기 소침하고 있었습니다만, html-webpack-plugin 와 copy-webpack-plugin 의 버젼을 최신으로 하면 깔끔하게 해소되었습니다. 취약성이 있던 리포지토리의 npm 패키지 그대로 사용하고 있던 것이 아다가 되었습니다. . .

어떻게든 완성

아직도 이해에 시달리는 곳도 있습니다만, 어떻게든 webpack4로 개발할 수 있는 환경이 정돈되었습니다. 이제 p5.js를 사용하여 애니메이션을 만들 수 있습니다.

GitHub 에 두어 두므로 좋으면 부디.
p5.js뿐만 아니라, 그대로 Canvas의 애니메이션을 취급하는 코드도 들어 있기 때문에, p5.js와 canvas 의 context 를 사용한 애니메이션도 같은 canvas상에서 양립해 사용할 수 있습니다.