webpack-dev-serverでhttpsでのアクセスを可能にする方法を紹介します。
外部APIのテストや、メディアデバイスのテストなどで、開発中のlocalhostをhttpsにする必要があるときなどに設定します。
以下のように、webpack-dev-serverを起動するスクリプトに--httpsのオプションを追加するだけでhttpsでのアクセスが可能となります。
"scripts": {
"dev": "webpack-dev-server --watch --hot --https",
"dev": "webpack-dev-server --watch --hot",
},以下のように画面とURLに警告が表示されます。
自分の開発環境ですので、無視しても問題ないとは思いますが、気になる場合は証明書の設定を行う必要があります。
設定方法やオプションは以下の公式サイトを参照ください。
Dockerコンテナ内でwebpack-dev-serverを起動して、ホスト側からアクセスを可能にする方法を紹介します。以下のように、webpack-dev-serverのオプションにhost: 0...
Dockerコンテナ内でwebpack-dev-serverを起動して、別のコンテナのnginxと連携する方法を紹介します。以下のような構成でコンテナを使用している場合を考えます。webコンテナはng...
WEBアプリでプッシュ通知を実装する方法を紹介します。googleが紹介している以下のページを参考にしました。ウェブアプリへのプッシュ通知の追加 | Web | Google Develope...
WEBアプリでプッシュ通知を実装するでWEBアプリでプッシュ通知を実装する手順を紹介しましたが、ここでは逆にプッシュ通知削除する方法を紹介します。先のページで紹介したように、ページロード時に以下のよう...
webpackでpostcssを導入してautoprefixerなどを行います。必要なパッケージをインストールします。postcss-loaderはwebpackでpostcssを行うために必要です。...
Vue.js lessを使いwebpackでビルドするでvueファイルの中でlessを実装してビルドする方法を紹介しました。htmlやbodyなどに適用するベースのクラスを外部のlessファイルに実装...
webpackのプラグインExtractTextPluginを使って、ビルドされたjsファイルからstyleの部分を抽出してcssファイルで出力します。extract-text-webpack-plu...
webpack.config.jsで本番環境でのビルドのみコードを圧縮するなどの処理を設定したい場合があります。webpackの設定を開発環境と本番環境で変更する方法を紹介します。cross-envと...
webpack-dev-serverで開発サーバーを起動します。ファイルやフォルダ構成などの環境はvueファイル（単一ファイルコンポーネント）をwebpackでビルドで紹介したものと同様とします。we...
自分で作成したモジュールをインポートするときはインポートするファイルを基準に相対パスで指定する必要があります。フォルダ構成によっては深く階層を辿らないといけないので、フォルダ構成が変わってしまうと大変...