【webpack】Babel導入済みwebpack：LP制作に最適

課題を持った人

今度LP(ランディングページ)を作るんだけど、使いやすいwebpackはありませんか？

筆者

筆者は会社でランディングページを作ることもあります。その時に使っているwebpackを紹介します。

1 パッケージの説明
2 パッケージの詳細

パッケージの説明

パッケージの概要はつぎのとおりです。

Pug
Sass
Babel
ESLint
51.2KB未満の画像ファイルはDataUrl形式で埋め込み
ビルド時にURL関数の値を絶対URLに書き換え
ビルド時にdistフォルダを自動クリーンアップ
フォントのバンドル

ここにJSライブラリ(Vue.jsやjQueryなど)、CSSフレームワーク(UIkitやBootstrapなど)を組み合わせることでLPであれば十分に対応できると思います。

GitHubで公開していますので、よかったら使ってみてください。
https://github.com/hasaexp/frontpkg05

ファイルをダウンロードしたら、npm installコマンドでライブラリをインストールするだけで開発環境が構築できます。

npm installコマンドを実行するためには、Node.jsをパソコンにインストールする必要があります。僕の環境は以下です。

$ node -v
v8.11.4

$npm -v
6.4.1

$ node -v

v8.11.4

$npm -v

6.4.1

パッケージの詳細

コマンド

npm run start

webpack-dev-server(ホットリロード機能付きの開発用サーバ)が起動します。コマンドを叩くとつぎのような画面が表示されます。

npm run build

公開用データをdistフォルダに生成します。コマンドをたたくとdistフォルダが生成されます。npm run buildコマンドを実行するとファイルの相対パスが絶対URL(http://www.example.com/)に書き換えられます。この設定は/webpack.production.jsの13行目に書いてあります。書き換えが不要であればコメントアウトしてください。また、利用する場合は、適宜URLを変更してください。

構成

パッケージの構成はつぎのとおりです。

.dist/  # 公開用データはここに生成される
node_modules/  # npm install コマンドでインストールしたnpmパッケージを管理するディレクトリ
src/
 ├ css/  # webpackに処理されるアセットを格納するディレクトリ
 │  └ font.css  # Webフォントの設定
 ├ font/  # UIコンポーネント(単一ファイルコンポーネント)
 │  └ font.otf  # Webフォントに使うフォントはここに格納 
 ├ images/ # imageデータはここに格納
 │  └ nature01.jpg  # 51.2KB以上の画像ファイルはビルド時にそのままdistにコピーされる
 │  └ nature02.jpg  # 51.2KB未満の画像ファイルはDataUrl形式で埋め込まれる
 ├ js  # JavaScriptファイルはここに格納
 │  └ greeting.js  # JavaScriptモジュール
 │  └ index.js  # エントリーポイント
 └ sass  # Sassファイルはここに格納
    └ style.sass
.babelrc  # Babelの設定ファイル
.eslintrc.json  # ESLintの設定ファイル
.gitignore  # Git の管理に含めないファイルを指定するためのファイル
package.json  # npmのモジュール、タスク定義
package-lock.json  # 依存パッケージが依存するパッケージのバージョン情報が変わる場合、package.jsonだけではnode_modulesを別環境で再現できなくなる。それを解決するためのファイル。基本、さわることはない。むずかしい(´*ω*｀)
README.md # プロジェクトのREADMEドキュメント
webpack.base.js  # webpackの基本設定
webpack.development.js  # 開発時(npm run start)に使うwebpackの設定
webpack.product.js  # 公開データ生成時(npm run build)に使うwebpack

.dist/ # 公開用データはここに生成される

node_modules/ # npm install コマンドでインストールしたnpmパッケージを管理するディレクトリ

src/

├ css/ # webpackに処理されるアセットを格納するディレクトリ

│ └ font.css # Webフォントの設定

├ font/ # UIコンポーネント(単一ファイルコンポーネント)

│ └ font.otf # Webフォントに使うフォントはここに格納

├ images/ # imageデータはここに格納

│ └ nature01.jpg # 51.2KB以上の画像ファイルはビルド時にそのままdistにコピーされる

│ └ nature02.jpg # 51.2KB未満の画像ファイルはDataUrl形式で埋め込まれる

├ js # JavaScriptファイルはここに格納

│ └ greeting.js # JavaScriptモジュール

│ └ index.js # エントリーポイント

└ sass # Sassファイルはここに格納

└ style.sass

.babelrc # Babelの設定ファイル

.eslintrc.json # ESLintの設定ファイル

.gitignore # Git の管理に含めないファイルを指定するためのファイル

package.json # npmのモジュール、タスク定義

package-lock.json # 依存パッケージが依存するパッケージのバージョン情報が変わる場合、package.jsonだけではnode_modulesを別環境で再現できなくなる。それを解決するためのファイル。基本、さわることはない。むずかしい(´*ω*｀)

README.md # プロジェクトのREADMEドキュメント

webpack.base.js # webpackの基本設定

webpack.development.js # 開発時(npm run start)に使うwebpackの設定

webpack.product.js # 公開データ生成時(npm run build)に使うwebpack

ファイルの説明をします。

/src/css/font.css

Webフォントの設定はここで行います。.sassファイルに設定するとローダーが機能せず処理がうまくいきません。すみません。解決方法がわかったら更新します。

/src/images/

画像ファイルはここに格納します。

51.2KB以上の画像ファイルはビルド時にそのままdistにコピーされます
51.2KB未満の画像ファイルはDataUrl形式で埋め込まれます

DataUrl形式とは……URLに直接、画像データや音声データを埋め込むためのフォーマットです。

/src/js/

JavaScriptファイルはここに格納します。index.jsがエントリーポイントです。このファイルにモジュール(.js、.sass、.cssなど)をインポートします。

/webpack.base.js

webpackの基本設定です。開発時(npm run start)、公開データ生成時(npm run build)の両方に関わる設定はここに書きます。

/webpack.development.js

開発時(npm run start)のwebpackの設定はここに書きます。

/webpack.product.js

公開データ生成時(npm run build)時のwebpackの設定はここに書きます。
npm run buildコマンドを実行するとファイルの相対パスが絶対URL(http://www.example.com/)に書き換えられます。この設定は/webpack.production.jsの13行目に書いてあります。書き換えが不要であればコメントアウトしてください。また、利用する場合は、適宜URLを変更してください。

筆者

以上、LP制作用のwebpackの紹介でした。ぜひ使ってみてください。

webpack