モックアップを効率的に作りたい:webpackを導入してみた①
webpackでモックアップが効率的に作れる??
Wordpressサイトを作っているタヌキです。 人によって作り方は様々だと思うのですが、私の場合、まずはHTML・CSSで完璧に仕上げてから、Wordpressサイトの形にしていきます。
そのHTML・CSSのサイトを作るときに、とにかく手間がめんどくさい。headerとかfooterとか、ページごとに作らず、ひとまとめにしたい。
そう思っていたら、友人が「webpackを使えばいいじゃん」と教えてくれました。
何? webpack??
気になって、こちらの書籍を購入。『速習webpack 速習シリーズ』 この本で学んだことを、Qiitaに書いていこうと思います。
webpackとは
webpackとは、
- Java Scriptのモジュールバンドラー。
- 関数またはクラスごとに細かく分割したモジュール(ファイル)を一つにまとめてくれる。
- しかも読み込みの順序も良い感じに解釈してまとめてくれる
・・・ものだそうです。 webpackによって、ファイルを細かく分割して作成し、まとめることもできるので、ファイルの見通しも良くなリマス。また、名前空間も分割できるので、名前の競合も防げます。
しかも、ローダー(リソースを読み込むためのライブラリ)を追加することで、HTMLやCSSや画像ファイルもバンドルすることができます。
webpackの使い方
準備(Node.jsとnpmのインストール)
webpackを使うには、まずNode.jsが必要です。
こちらのサイトからインストールできますし、macの場合、以下のコマンドでもNode.jsをインストールできます。
# homebrewをインストール $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" # nodebrewをインストール $ brew install nodebrew # Node.jsをインストール $ nodebrew install-binary stable
Node.jsがインストールできたことを確認するために、$ npm -v
で、npmのパージョンが確認したら、プロジェクトのフォルダに行き、次のコマンドで設定ファイルを生成します。
$ cd プロジェクトのルート $ npm init -y
npm init -y
の-y オプションは、「全て規定の値でpackage.jsonを生成する」という意味です。
webpackをインストール
webpackのインストールにはnpmコマンドを利用します。
$ npm install --save-dev webpack webpack-cli
--save-dev
オプションは、「インストールするパッケージの情報をpackage.jsonに記録する」という意味です。
このコマンドによって、package-lock.json
というファイルが生成されます。
ファイルを準備
ここまでで自動生成されたファイルに、いくつかファイルを追記します。ここまでのプロセスで自動生成されたファイルと、自分で追記したファイルを合わせた、フォルダ構造はこちらです
. ├── modules │ ├ module-A.js ★ │ └ module-B.js ★ ├── entry.js ★ ├── index.html ★ ├── output.js ├── node_modules └── package.json
★は手動で生成したファイル、その他は自動生成のファイルです。この時、module-A.js
とmodule-B.js
の内容をentry.js
に統合し、output.js
を通じて、index.html
に表示しようと思います。
この時、手動で生成した各ファイルに書いてある内容はこちらです。
console.log('moduleA がインポートされました');
console.log('moduleB もインポートされました');
import * as moduleA from './modules/module-A'; import * as moduleB from './modules/module-B'; console.log('これは、エントリーポイントのあるファイルです');
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="output.js"></script> <title>Document</title> </head> <body> <p>hello! webpack!</p> </body> </html>
設定ファイルの書き方
webpack.config.js
をプロジェクト直下に自分で用意します。そして、以下の内容を記載します。
module.exports = { // 1.エントリーポイント entry: './entry.js', output: { //2.出力先のフォルダ path: `${__dirname}`, //3.出力先ファイル名 filename: 'output.js' }, };
$ npx webpack
そうすると、output.js
が自動生成され、index.html
(のコンソール)には以下の内容が出力されます。
module-A.js
とmodule-B.js
の内容がentry.js
にまとまり、output.js
を通じて、index.html
に表示されました。
webpackはこのままではあまり活用の意味がわかりにくいですが、Jqueryをまとめたり、アイコンをまとめたり、CSSをまとめたりなど、活用のポイントがたくさんあるようです。 まだまだ勉強中ではありますが、便利な使い方がわかったら、随時発信していきたいと思います。