webpackとは?実際にコードを書いて体感してみた。

JavaScript

webpackとは

モジュールバンドラー

webpackはモジュールバンドラーです。モジュールバンドラーは「モジュールをひとまとめにしてくれるツール」のことを指し、複数のJSファイルを1つにまとめる機能を提供してくれます。こうすることでブラウザが認識できなかったJSファイルの依存関係を解消やファイルの軽量化を実現することができます。

他のタスクランナーと衝突しない

次のサイトに書かれていることを読むと、webpackは個別のタスクランナーと同時にバンドリング処理をすることができると書かれています。タスクランナーは一般的には「Webアプリケーションを構築するのに必要な処理を自動化してくれるツール」のことを指します。有名なタスクランナーとしては「npm」「Gulp」そして「webpack」などが挙げられます。つまり他のタスクランナーがあってもその影響を受けずに、複数のJSファイルを一つにまとめてくれるという訳です。

Webpack is a module bundler. Webpack can take care of bundling alongside a separate task runner. However, the line between bundler and task runner has become blurred thanks to community developed webpack plugins. Sometimes these plugins are used to perform tasks that are usually done outside of webpack, such as cleaning the build directory or deploying the build.

参照元:「What is Webpack」

What is Webpack
Webpack is a module bundler. Webpack can take care of bundling alongside a separate task runner. Ho…

hot reload

webpackを使う理由は多くの場合「hot reload」でしょう。ファイルが変更された時に、webpackがモジュールを再ビルドしてくれるので、変更箇所がリアルタイムでブラウザに反映されます。これは開発効率を爆上げさせます。モダンなWeb開発でhot reloadがない環境で開発するのはほぼないのでは?と思うほどです。(勝手な推測です)

webpackを実装してみた

hot reloadを体験すべくwebpackを実装して使ってみました。

webpackのフォルダ構成

今回はwebpackはsrcの中に含まれるjs,htmlファイルをバンドルするように設定しました。バンドルされたファイルはdistディレクトリに生成されます。

package.jsonは次のように記述しました。npm run buildを実行するとsrcのファイル達がバンドルされます。npm start devを実行するとhttp://127.0.0.1:8080/でバンドルされたファイルにアクセスできるようになります。

{
  "name": "local-javascript",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start:dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

webpack.config.jsは次のような感じ。

const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: { minimize: true }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: './index.html'
    })
  ]
};

npm run start でローカルにwebサーバーにアクセスしたのち、何でも良いのでsrcのフォルダ内のファイルを変更して保存するとhot reloadが走って再ビルドされた結果がブラウザに反映されるようになります。自分は適当にutils.jsというファイルを作ってそこに関数を定義してモジュール化したのち、index.jsでそのモジュールをimportして、console.logで表示する処理を書きました。console.logで表示される内容が変化するようにファイルを書き換えて、保存するとhot reloadが走って、console.logが自動更新されるのが確認できました。何でも良いので、実際にローカルで試してやってみてください。

番外:おすすめアイテム

記事の内容とは別に自宅・オフィスでの開発がもっと快適に、楽しくなる商品を紹介します。アイテム1つで開発効率が一気に向上したり、開発のモチベーションが上がったりするので良いアイテムにはお金を投資すると良いかと。

KATUO
KATUO
今回紹介する商品は普段自分が使っているものなので自信を持ってお勧めできますー。では1つずつ紹介していきます。

おすすめアイテム①

自分はオフィス次の2点の座布団と背もたれクッションを利用してます。姿勢が安定し、お尻への負担が激減します。オフィスにいるのに自宅で作業しているような感覚になるので気に入ってます。また疲労感もかなり減るので費用対効果が非常に高いアイテムです。

おすすめアイテム②

ブックスタンドみなさん使ってますか?PCを打ちながら参考書見る時に手で抑える必要がなくなるので非常に便利です。自分も購入した時なんでいままで使ってなかたんだろうと後悔したのでまだ持ってない方は買っておくと作業効率があがります。

おすすめアイテム③

PCスタンド、magic keyboard、magic mouseを購入してから、開発効率があがり、身体的負担が減って快適に開発ができるようになりました。

エンジニアの基礎知識・教養

別の記事でエンジニアとして知っておくべき技術本についてまとめました。初心者には最低限読んでおいて欲しい技術本をまとめました。例えば「リーダブルコード」などは技術力の高いエンジニアなら必ず過去に読んでいる本だと思います。

筆者
筆者

今回の記事の内容は以上で終了です!最後まで読んでくれてありがとうございました!Twitterもやってるのでよかったらフォローしてください!

タイトルとURLをコピーしました