webpackの開発効率をあげる便利ツール - Qiita
はじめに 今回もwebpackネタです。色々機能がありすぎるのか自分が記事書くの遅いのか、思いの外進んでおらずもどかしいです。 まぁそんなことはおいといて、webpackの開発環境用ツールのことについて触れたいと思います。 ただ公式にもありますが、本番環境で使うのは避けてくださいとあります。絶対使っちゃいけませんよ？ 今後も増えれば記事に追加していきます。もしおすすめがあれば是非教えてくださいm(__)m inline-source-map 通常ですと、複数ファイルをbundleしてエラーが発生した場合、 ブラウザのconsoleログに出てくるのはbundle.js(bundle.jsに出力したとして)の何行目・・・ と言う情報しか出てきません。 これではデバッグしづらいです。そこでinline-source-mapを使うわけですが、これを使うとbundle前のファイルを示してくれます。
webpackでdigestをつけてキャッシュ対応 + digestされたファイルの参照
はじめに こちらの記事でwebpackでbundleされたファイルの管理を行いました。 ただこのままですと本番環境で実運用するにはファイルのキャッシュ対応が足りません。ブラウザがキャッシュをしてしまうので、ファイルにdigestをつけてデプロイのたびにファイル名が異なるようにしないといけないわけです。 ですので今回は、「digestつきのファイルを出力してそれを使ってみる」ということをやってみます。 ※ jsやhtmlなどはこちらの記事のものを使います。 今回のゴール webpackでbundleされたファイルにdigestをつける digestつきのファイルを読み込み digestつきのファイルを出力する これはめちゃくちゃ簡単です。 webpack.config.jsでoutputの設定をしていると思いますが、出力ファイルのファイル名フォーマットに[hash]追加するだけです。 コード
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
