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

クリック編集のjQuery

最近のWEBサービスだと表示の画面と編集画面が同じになっていて、一見表示なんだけど、クリックすると特定の項目は編集できる、そんな画面がふえていきていますよね。 先日社内アプリをつくっていたところ、そう …

no image

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …

no image

携帯のUIに関して

いまさらながらスマホのUI表示に苦戦してます。 まあ、現状のWEBサイトを作る場合、BtoCでもBtoBでもスマホ対策は必須ですよね。 私の場合、デザインが本業でないこともあり、ちょっとサボっていまし …

no image

PHP(DBアクセス)→HTML→Angularを実行するために

AngularJSでデータベースをつかうときには$httpや$resourceを使うことが多いですが、それ以前にAngularを読み込んでデータベースにアクセスしないことも重要かと思っています。 とい …

no image

無限スクロールプラグイン infinite scroll

無限スクロールのプラグインについていろいろ調べてきましたが、今回はテーブル形式でなく、通常の無限スクロールができるもの(イメージとしてはtwitterっぽい遷移。) infinte scroollとい …