skillup

技術ブログ

JavaScript

webpackについて再履修2

投稿日:

以前やったこの記事への追記的な意味で。

webpackについて再履修

webpack-cli

ちゃんと理解するにはgulpから入るよりもまずはwebpack自体をコマンドラインで実行すべきだと思います。

が、コマンドラインでのwebpackをしたいときはwebpackと共にwebpack-cliをnpmでいれないと動きません。

設定ファイル書かなくてもresouceとoutputを手動で直接入れることもできます。最初はここからやった方が良さげ。

gulp-webpackは非推奨

gulpでwebpackを使うときはgulp-webpackを使い、コンパイルをしていました。

上記のようなコードですが、

  • コンパイル元のソースでimportが使えない(コンパイル自体はできるが出来上がったソースでJavaScriptのシンタックスエラー発生)
  • Babelのモジュールが機能しない、トランスパイルされない

などの問題が発生。ずっと設定ファイル(config.js)に問題があるのかなと思っていましたが、コマンドラインでのwebpackを同一の設定ファイルで行ったところ上記の問題は発生しないので、ひょっとしてライブラリの設定かな?と思ったところ、gulp-webpack自体非推奨になっていました。

https://www.npmjs.com/package/gulp-webpack

2019/2月現在、下記のようなメッセージが出力されています。

This package has been deprecated
Author message:
Has been renamed to https://www.npmjs.com/package/webpack-stream

正しくは素のwebpackとwebpack-streamを使うのが正しいようで、下記のようなコードに変えたところ、無事動きました。

devtoolでデバッグ可能

ずっとデバッグの方法がないかなーと思っていたんですが、module.exportを書く際に下記のように、書いておけばブラウザのconsole画面で、webpackという欄が出てきて、素のソースからデバッグできます。

最初に知っておけばよかった・・・

-JavaScript
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

JavaScriptでの時計作成

今回はWebアプリで1秒ごとに更新されるデジタル時計の作成方法について。 基本的には 現在時刻を秒まで含めて表示 その関数を一秒ごとに更新 でOKです。 ネットにどんぴしゃりのサンプルが落ちていたので …

no image

timepickerについて

日付を入力するときに直接、文字入力するのがメンドイことからカレンダーが表示されるプラグインを使っている人は多いでしょう。 私も日頃Datepickerというライブラリを使っています。が、このプラグイン …

no image

bowerのインストール

業務でAngularJSをいじっていますが、そこでbowerというソフトウェアの存在を知りました。 Contents1 bowerとは?2 インストール方法 bowerとは? フロントエンドのパッケー …

no image

新技術のメリットを理解したい場合(jQueryと比べた場合のVueのメリットなど)

Vueを昨年度ぐらいからコツコツと勉強しています。 正直、その理由の半分ぐらいは「流行っているから」というのが大きいですね(汗) エンジニアとしてはやはり新しい技術自体を追い求めること自体に「快感」の …

no image

クロスドメインがらみのajax

ajaxで別ドメインに対して、プログラムを実行したい時に注意すべきことなどを。 Contents1 ログ、レスポンスヘッダをとにかく追う2 特定ドメインからの許可3 フレームワーク側での認証ロジック( …