webpack メモ2：autoprefixer追加と、LAN内で閲覧可能に
お母ちゃん
2019.11.27
0
0
先日作った設定ファイルに、下記を追加しました
・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アドレスで確認出来るようになりました。
|
1 2 3 4 5 6 7 |
devServer: { open: true, contentBase: path.join(__dirname, 'public'), watchContentBase: true, host: '192.168.x.xx', port: 3000, }, |
autoprefixerを追加したい
上記IPで早速Win10のIE11で確認したところ崩れまくりで orz
flexboxが普通に崩れてました。
autoprefixer 追加しなければーということで色々調べて追加しました。
最新版で学ぶwebpack 4入門 – スタイルシート（CSSやSass）を取り込む方法 – ICS MEDIA
モジュールの追加
|
1 |
npm i -D postcss-loader autoprefixer |
webpack.config.js に設定を追加
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{ loader: "postcss-loader", options: { sourceMap: true, plugins: [ require("autoprefixer")({ grid: true, browsers: [ 'last 2 versions', 'ie >= 11', 'Android >= 4', 'iOS >= 8' ] }) ] } }, |
最初、「grid: true,」だけではIEのflexboxなどベンダープレフィックスがちゃんと出力されない？ようで色々調べて browsers のところで苦戦したのですが・・
上記のような形でひとまず無事、IE11 で flexboxが正常表示されました><
webpack.config.js
製作中にまた何か追加が必要になってきそうですが・・
とりあえず現状の設定ファイルはこのようになりました・・・
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
const path = require('path'); const enabledSourceMap = process.env.NODE_ENV === 'development'; const isProduction = process.env.NODE_ENV === 'production'; const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { mode: isProduction ? 'production':'development', output: { path: path.resolve(__dirname, 'public/path/js'), publicPath: '/path/js/', filename: 'common.js', }, module: { rules: [ { test: /\.scss/, use: [ isProduction ? MiniCssExtractPlugin.loader : 'style-loader', { loader: "css-loader", options: { url: false, sourceMap: enabledSourceMap, importLoaders: 2 } }, { loader: "postcss-loader", options: { sourceMap: true, plugins: [ require("autoprefixer")({ grid: true, browsers: [ 'last 2 versions', 'ie >= 11', 'Android >= 4', 'iOS >= 8' ] }) ] } }, { loader: 'sass-loader', options: { sourceMap: enabledSourceMap, } } ] } ] }, devServer: { open: true, contentBase: path.join(__dirname, 'public'), watchContentBase: true, host: '192.168.x.xx', port: 3000, }, plugins: [ new MiniCssExtractPlugin({ filename: '../css/common.css', }), ], }; |
そもそも今回はgulpだけで十分な状況なので わざわざwebpackにする必要性無く今の所は特に恩恵無いのだけれど・・まぁとりあえず使ってみたかった。そのうちきっと何か良い事あるでしょう・・
