node.js

1から学ぶWebpackの使い方

投稿日:2018年5月27日 更新日:

webpackとは

webpackは、最新のjavascriptアプリケーション用の静的モジュールのバンドラー.
つまり、webpackで複数のjavascriptファイルなどを1つのファイルにまとめることによって、モジュール化ができるようになる.
エントリポイントとなっているjavascriptファイルで、importやrequireをつかうことにより、webpackが指定の場所かnode_modules以下の対象ファイルをうまくまとめてくれる.

インストール

webpackをつかう

npxコマンドをつかう

ふつう、globalにインストールしないとコマンドラインからは使えない.
npxコマンドは、ローカルのnode_modules以下のbinファイルを実行してくれるコマンド.

npm scriptsをつかう

npm scriptsは、package.jsonでscriptsを設定することによって、任意のコマンドを実行する.

package.jsonには、こんな感じで設定.

つぎのように実行できる.

webpack.config.js

webpack4からは、設定ファイルがなくてもとりあえず動く.
その場合、デフォルトで ./src/index.js をエントリポイントにして、 ./dist/main.js にまとめたファイルを書き出す.

webpack.config.jsの書式

module.exportsで囲む.

要素は、大きく、Mode、Entry、Output、Loader、Pluginsなど.

全体像.

CoffeeScriptを使った設定ファイル

CoffeeScriptをインストールすれば、デフォルトで設定ファイルとしてwebpack.config.coffeeを読み込んでくれる.

mode

バンドルする際に開発用に圧縮するか、本番用に圧縮するか、なにもしないかを選ぶ.

devtool

ソースマップを設定するかどうか

devServer

webpack-dev-server用の設定

babel-loader

インストール

設定

coffee-loader

インストール

設定

transpileオプションで、babelのプリセットオプションに渡すことができる.
entryをcoffeeファイルに変えるのを忘れると、src以下が解決できない的なエラーが出る.
resolve→extensionsを設定して、coffee拡張子を認識するようにすれば、デフォルトで、src/index.coffeeをエントリポイントにする.

html-loader

html-loaderとプラグインhtml-webpack-pluginを組み合わせることで、htmlにjavascript用のスクリプトタグを挿入してくれる.

インストール

設定

ルールにhtml-loaderを設定して、pluginの利用を設定する.

sass-loader

インストール

設定

使い方

url-loader

インストール

画像などをバンドルする場合、url-loaderをつかう.

設定

使い方

scss内のurlもバンドルしてくれるみたい

とりあえず

情報

kindle unlimitedで読める!

速習webpack 速習シリーズ

速習webpack 速習シリーズ電子書籍

作者山田祥寛

発行WINGSプロジェクト

発売日2018年4月27日

カテゴリーKindle版

ページ数127

Supported by amazon Product Advertising API

-node.js
-,

執筆者:

関連記事

gulpでelectronをlivereloadしながらcoffeeとsassで開発する環境

By: Nrico – CC BY 2.0 目次1 package.json2 gulpfile.coffee3 bower + browserify4 ストップウォッチ package. …

Electronでmaterialize

By: Vancouver Film School – CC BY 2.0 目次1 Materialize2 bower3 sass4 browserify5 できた Materializ …

GoogleHomeとRaspberryPi3で赤外線リモコンを操作する〜ADRSIR

By: Fujitaka Daidoji – CC BY 2.0 目次1 ADRSIR2 IFTTTとfirebase3 node.js4 pm2 ADRSIR ADRSIRは、ラズベリー …

Electron + CoffeeScript + Backbone.js + EcoでTodolistをつくってみた

By: Purple Slog – CC BY 2.0 目次1 はじめに2 gulpの準備3 Hello electron4 Hello Backbone.js & eco5 Ba …

GoogleHomeに好きな言葉をしゃべらせる〜google-home-notifier

By: Sabrina Eras – CC BY 2.0 目次1 Google Home2 google-home-notifier Google Home Google Homeは言わず …