DNET_Webpack

webpack

• 戻る（JavaScriptの「モジュール・バンドラ」の該当節）

概要

• Webコンテンツを構成するファイルを「モジュール」という単位で取り扱い、最適な形に作り変える為のツール
• Webアプリケーションに必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール

特徴

単純なBundler & Minifierではなく、

• コンパイルを要するAltJS
• トランスパイラを要するES6・7

などのプリプロセス的な処理（≒ビルド）を行う。

詳細

インストール

• webpackもnpmで管理されている。
• npm installコマンド（npmの「インストール」の該当節を参照）で "開発ツールとして" 取得する。

npm install --save-dev webpack webpack-cli

使い方

JavaScriptライブラリの作り方の「webpack」の該当節を参照。

連携

npmとの連携

package.json（npmの該当節を参照）に設定を行うが、
これは上記のインストール・コマンドを実行することで自動的に設定される。

参考

• webpack
  https://webpack.js.org

• webpack
  https://github.com/webpack

• サルでもわかるwebpack 4.5入門 - 古い情報に騙されずに学ぼう - ICS MEDIA
  https://ics.media/entry/12140

Qiita

• webpack 4 入門
  https://qiita.com/soarflat/items/28bf799f7e0335b68186
• はじめてのWebpack
  https://qiita.com/cheez921/items/266b1b4534b6111a9686
• webpack で始めるイマドキのフロントエンド開発
  https://qiita.com/yosisa/items/61cfd3ede598e194813b

CodeZine（コードジン）

• Webページの構成ファイルをまとめる、モジュールバンドラー「webpack」入門
  https://codezine.jp/article/detail/10408
• モジュールバンドラーwebpackの設定を調整して、より実践的に使いこなそう
  https://codezine.jp/article/detail/10516

webpack.config.js

• webpack.config.jsがわからない - Qiita
  https://qiita.com/one-kelvin/items/b810aafb6b5ef90789a3

• webpack.config.jsの読み方、書き方 - dackdive's blog
  http://dackdive.hateblo.jp/entry/2016/04/13/123000

移行メモ

• PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 同一ページ内のアンカは見出しから生成されるアンカに張り替え、 他ページのアンカを指すリンクは「〜（ページ名 の該当節を参照）」の形に置き換えた。

---

Tags: 移行, webpack, モジュール・バンドラ, npm, ビルドツール, AltJS, トランスパイラ