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もバンドルしてくれるみたい

jQueryをほかのスクリプト内で参照する webpack.ProvidePlugin

jQueryプラグインなど、ほかのスクリプト内でjQueryなどを参照するには、

jquery-scollify

scrollifyを普通に設定しても、~.scrollify is not defined的なエラーが出てしまう.

これで動いた.

あと、scriptタグやタグからonClickなどの場合は$ is not undefinedといわれてしまう.

そこで、グローバルに$を設定しておく.

jquery-drawer

IScroll is not definedエラーに悩まされた.

webpack.ProvidePluginで設定したら動いた.

とりあえず

情報

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. …

Ubuntu12.04にnode6.9をインストール~nodebrew

By: Kazuyoshi Kato – CC BY 2.0 目次1 nodebrew自身のアップデート2 nodebrewでnode6.9をインストール3 yarnのインストール nod …

RaspberryPI3のNode-REDでHello World

By: Harry Rose – CC BY 2.0 目次1 Node-RED2 インストール3 Hello World Node-RED Node-REDはハードウェアデバイス/APIお …

Todolistをmarionette化

By: Jackie – CC BY 2.0 目次1 Marionette.js2 インストール3 Application4 gulpfile.coffee5 ItemView6 Coll …

ElectronでTrayアイコン

By: Cooks & Kitchens – CC BY 2.0 目次1 Tray2 main.coffee3 できた Tray github.com/atom/electron