ブログ

Webpackのススメ

JavascriptというWeb制作で使われる言語があります。

色々なサイトのHTMLソースコードをのぞいて見るとわかりますが、

<script src=”//example.com/example.min.js”></script>

などという形で読み込まれているのがJavascriptのファイルです。

ひとつのファイルにまとめあげてくれる方法

方法のひとつとして最近よく使われているのがWebpackと呼ばれるツールです。

これを使うと複数あるJavascriptファイルをひとつのファイルにまとめあげることが可能です。Babelというコンパイラを使うように設定すればES6と呼ばれるような最新のJavascriptのコードも記述することが可能です。(ES6では一般的なオブジェクト指向言語にあるようなclassが使えます。)Babelというのは具体的にどういったものなのかというと、ES6などと呼ばれるこれからJavascriptに搭載される最新の仕様を、現在使われているJavascriptのコードに変換してくれるものなんです。コンパイラと聞くとその都度コンパイルを実行するのが面倒くさいなと思われるかもしれませんがこういった処理というのは自動化することが可能です。セーブした瞬間にコンパイラが走ってということをさせることができるんです。さらに他のツールを組み合わせれば、セーブしてコンパイルしたタイミングでブラウザの画面をリロードするというようなこともできるんです。わざわざ自分でリロードをしなくてもすむんですね。

こういったものとWebpackなどのツールを組み合わせて快適な環境を作り上げていくというのが現在のトレンドです。

Webpackでひとつのファイルにするときにminifyといって圧縮も同時にかけることも可能です。これをするとファイル容量が減るのでアクセスしてくるユーザーにも優しいですし、サーバーにもやさしいですよね。また、minifyするときにライセンスコメントだけを残す設定をすることもできます。ライセンスコメントを消してしまうのはライセンス違反になってしまいますからね。こういうのは気をつけなければなりません。

Webpackなど便利なツールは沢山でているのでぜひ一度試してみていただきたいですね。手放せなくなりますよ。

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

プロフィール

プロフィール

このサイトを運営している○○です。
自己紹介が入ります。自己紹介が入ります。自己紹介が入ります。

自己紹介が入ります。
改行したいところにはカッコ・小文字のb小文字のr・カッコ閉じるを入れましょう。こんなの→

フォロー

LINE@始めました

友だち追加

おすすめ商品

  1. 初期費用ゼロホームページ制作
  2. ホームページ制作
  3. 動画制作
  4. 知多半島飲食店ポータルサイト
ページ上部へ戻る