webpackを使用した静的サイト制作環境パッケージ、”static-pack”を作成しました
こんにちは。上間ウェブ店の上間です。
会社の自社案件で、静的サイト制作環境を作りましたので紹介します。
githubに上げてるので気に入ったら使ってやってください。
作成したきっかけ
元々gulpでフロントエンドの環境を作っていて、webpackはjs(jquery)のバンドルのためだけに使っていました。webpackのバージョンも2でした。
reactを初めて実案件で導入した時に、コンパイルがあまりにも遅くこれは厳しいって感じになり、出たばかりのwebpack4を導入。
あまりにもサクサク動くので、gulpで動かしていた他のツール達も移植しちゃえって感じで、よくある静的サイトで汎用的に使えるツールを目指して作りました。
が、しかし、テンプレートエンジンやCSSメタ言語は、gulpで導入の記事はたくさんあるけどwebpackでの記事がなかなか出てこない。。
そして脱gulpしたいという記事をちらほら見かけました。
いまwebpackでの制作環境パッケージ作れば、始めたばかりのブログもPV上がるんじゃないかという淡い期待を込めてなんとか作り上げました。
おかげでwebpackの理解と英語の理解が深まりました。（日本語の記事がホントに少なかった。。）
パッケージの特徴
最新のツールや技術を盛り込みつつ、IE11を含む各ブラウザの最新バージョンでの動作を目標にしています。
フロントエンド開発のベースにしたり、webpackでの各ツールの使い方の参考に使ってみてください。
使用しているツールや技術などは下記になります。
- dev server → browsersync
- template engine → pug
- post css → stylus + stylint
- javascript → es6 + babel + eslint (+ jquery)
- svg-sprite
- bootstrap4 + css grid layout
- prism.js
使い方などはgithubにて
コマンドはgithubに載せたのでそちらをご覧ください。githubから取得後に起動するとサンプルが入っていて、そちらに使い方や特徴などが書いてあります。