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

gulpインストールとタスクの実行

今更ですが、gulpインストールと作業に関して。 less使ってたんですが、コンパイルをずっとatomのエディタで行っていたんですが、一般的にはgulpで実行する方のほうが多いでしょう。 別件でgul …

no image

JavaScriptのタイマー

えーボタンを押すと、時間の計測がはじまり、別のボタンを押すとそのタイマーがとまるというもの。 WEBのアプリでは比較的よくお目にかかるタイプかと思います。 一番多いのは情報商材のページかもしれないです …

no image

bootstrapでのJavaScriptエラーチェック

お問い合わせフォームの入力チェックというのは本来サーバーサイド側でやらなくてはいけないのですが、JavaScriptによってクライアント側でやることも可能です。 入力欄にフォーカスして、遷移したときに …

no image

timepickerについて

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

no image

jQuery modalダイアログについて&重複時間処理

Contents1 jqueryモーダルダイアログ1.1 あらかじめ読み込むライブラリ1.2 ソース本体1.2.1 Html側1.2.2 Javascript側1.2.3 参考リンク2 重複時間につい …

アーカイブ