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

npmでのJSライブラリインストール&ビルド(※Laravel使用時)

JavaScriptのインストールですが、いままではライブラリを1つ1つインストールしてました。 bowerでインストールしたこともあったんですが、読み込み自体は1つ1つしていました。 先日仕事でnp …

no image

複数の非同期処理終了後(when&Promise.all)

JavaScriptで複数の非同期処理(例:API)を走らせて、その非同期処理が全て終わった後で、何らかの処理をしたい時について。 Contents1 when2 Promise_all when j …

no image

Angular概論 モジュール、コントローラー、スコープなど

Contents1 Angularインストール2 ソース2.1 モジュール、スコープとコントローラ2.1.1  モジュールとは2.1.2 コントローラーとは2.1.3 スコープとは3 参考リンク An …

no image

AngularJS テーブル行のソート入れ替え&ドラック&ドロップ

受注伝票みたいなものを作ると伝票の登録画面はヘッダーと明細に分かれますね。 私が携わったプロジェクトでは、大体一画面でヘッダー情報と明細情報を入力することが一般的でした。 今回AngularJSでその …

no image

vueでの配列、オブジェクトの反映に関して

vueでのハマりポイントですが、関門としては コンポーネント間の連携 オブジェクトや配列となった時に反映がされない などがあげられると思います。 コンポーネント間の連携に関してはこちらの記事でも書き、 …