Home Made Garbage

webpack メモ2:autoprefixer追加と、LAN内で閲覧可能に

お母ちゃん  2019.11.27 
ホーム
電子工作
Raspberry Pi
IOT
WEB

webpack メモ

先日作った設定ファイルに、下記を追加しました
・LAN内で外のPCから見たい
・autoprefixerを追加したい

LAN内で外のPCから見たい

今まで使っていたgulpみたいに、
他のPCからIPアドレス( http:192.168.x.xx:300/) で確認出来なかったので調べた所IPアドレスを指定する必要がありそうでした。

webpack-dev-serverでモバイルからアクセス可能なローカル開発サーバーを立ち上げる(in vue-cli) – Qiita

ひとまず IPアドレスの設定を追加したら他PCからIPアドレスで確認出来るようになりました。

autoprefixerを追加したい

上記IPで早速Win10のIE11で確認したところ崩れまくりで orz
flexboxが普通に崩れてました。
autoprefixer 追加しなければーということで色々調べて追加しました。

最新版で学ぶwebpack 4入門 – スタイルシート(CSSやSass)を取り込む方法 – ICS MEDIA

モジュールの追加

webpack.config.js に設定を追加

最初、「grid: true,」だけではIEのflexboxなどベンダープレフィックスがちゃんと出力されない?ようで色々調べて browsers のところで苦戦したのですが・・
上記のような形でひとまず無事、IE11 で flexboxが正常表示されました><

webpack.config.js

製作中にまた何か追加が必要になってきそうですが・・
とりあえず現状の設定ファイルはこのようになりました・・・

そもそも今回はgulpだけで十分な状況なので わざわざwebpackにする必要性無く今の所は特に恩恵無いのだけれど・・まぁとりあえず使ってみたかった。そのうちきっと何か良い事あるでしょう・・

Related Posts

コメントはこちらから

メールアドレスが公開されることはありません。コメントのみでもOKです。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください