![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -[[戻る>JavaScript#of6181e9]] *目次 [#f89f6296] #contents *概要 [#mdcbaec4] -Webコンテンツを構成するファイルを「モジュール」という単位で取り扱い、最適な形に作り変える為のツール -Webアプリケーションに必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール *特徴 [#a2000435] 単純なBundler & Minifierではなく、 -コンパイルを要するAltJS -トランスパイラを要するES6・7 などのプリプロセス的な処理（≒ビルド）を行う。 *詳細 [#g93d1f30] **インストール [#g3d8ef92] -webpackも[[npm]]で管理されている。 -[[npm installコマンド>npm#nb3126fd]]で "開発ツールとして" 取得する。 npm install --save-dev webpack webpack-cli **webpack.config.jsの設定を行う。 [#t6e8d711] [[Cordova - config.xml]]のように、webpack.config.jsがあれば、~ ここからコマンドを自動実行するため、都度コマンドを実行する必要がなくなる。 **使い方 [#t6e8d711] [[コチラ>JavaScriptライブラリの作り方#jba2efa6]]を参照。 **ビルド（バンドル） [#t195cb75] 以下のコマンドでバンドル処理を行う。 npm run webpack [[JavaScriptライブラリの作り方#jba2efa6]] **リンク [#fddecedc] 結果、bundle.jsにバンドルされるので、コレをHTMLからリンクさせる。 <script type="text/JavaScript" src="public/js/bundle.js"></script> *連携 [#oa11467b] **[[npm]]との連携 [#a3989384] [[package.json>npm#k53f2eec]]に設定を行うが、~ これは[[上記のインストール・コマンド>#g3d8ef92]]を実行することで自動的に設定される。 *参考 [#v44e6c39] -webpack~ https://webpack.js.org -webpack~ https://github.com/webpack -サルでもわかるwebpack 4.5入門 - 古い情報に騙されずに学ぼう - ICS MEDIA~ https://ics.media/entry/12140 **Qiita [#va547875] -webpack 4 入門~ https://qiita.com/soarflat/items/28bf799f7e0335b68186 -はじめてのWebpack~ https://qiita.com/cheez921/items/266b1b4534b6111a9686 -webpack で始めるイマドキのフロントエンド開発~ https://qiita.com/yosisa/items/61cfd3ede598e194813b **CodeZine（コードジン） [#vff1c6ba] -Webページの構成ファイルをまとめる、モジュールバンドラー「webpack」入門~ https://codezine.jp/article/detail/10408 -モジュールバンドラーwebpackの設定を調整して、より実践的に使いこなそう~ https://codezine.jp/article/detail/10516 **webpack.config.js [#x9afc0cb] -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
