はてなブックマーク

小規模なサイトでもwebpackを使って効率的にビルドしてサイト構築する方法です。 一般的なサイト構成のテンプレートとして使っていただけると思います。 条件 保守性の観点から、以下の点を満たすことを条件とします。 webpackだけで完結したい 開発用ディレクトリと公開ディレクトリを分離したい 公開ディレクトリにはwebpackからすべてのリソースを書き出したい（html,js,css,image） HTML内の共通コンポーネントは外部ファイル化して読み込ませる形にしたい 共通コンポーネント内で変数を使いたい CSSはSASS(SCSS)を使いたい JSはES6(ES2015)で書いてコンパイルしたい 修正時の保守性を高くしたい（毎回configを書き換えるような形にしたくない） 作りたいページの構成 ページ構成は以下のような、よくある感じの構成とします。 リソースはすべてassetディレ

web上の情報を抽出するスクレイピング技術ですが、いままでphantomJSで行っていましたが、chromeがヘッドレスブラウザに対応したとのことで、そのnodeライブラリであるpuppeteerで実践してみました。 環境構築 とりあえずお試しということで、dockerで構築しました。 構成はnode.jsのdockerイメージにpuppeteerを追加するかたちです。 下記2サイトの手順を大幅に参考にさせていただきました。 Docker コンテナ上で Puppeteer を動かす Puppeteer をDockerコンテナで利用する ディレクトリ構成はこんな感じ。 / ├ app/ │　└ script/ │　 └ app.js │　└ data/ ├ docker-compose.yml ├ Dockerfile └ Package.json FROM node:9.2.0 RUN a

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?