見出し画像

バンドル時にベンダープレフィックスを自動付与する【webpack5】

nakasho

webpackについて学習中の講座は以下。

※ただし、講座内のwebpackのバージョンは４なので、現在のwebpack5で動作確認済み。

環境は以下。

// package.jsonから抜粋
"devDependencies": {
    "autoprefixer": "^10.3.1",
    "css-loader": "^6.2.0",
    "postcss-loader": "^6.1.1",
    "sass": "^1.37.5",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.2.1",
    "webpack": "^5.49.0",
    "webpack-cli": "^4.7.2"
 }

webpack.config.jsの書き方は２通り。
想定として、scss→cssへの変換を含む。

▶︎ひとつめ

webpack.config.jsとpostcss.config.jsを定義する

// webpack.config.jsから抜粋
module: {
    rules: [
        {
            test: /\.scss$/, 
            use: [
                "style-loader",
                "css-loader",
                "postcss-loader", // 定義順に注意
                "scss-loader"
            ]
        }
    ]
}
// postcss.config.js
module.exports = {
    plugins: [
        require("autoprefixer")
    ],
};

▶︎ふたつめ

webpack.config.js内にオプションを定義する。

module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                "style-loader",
                "css-loader",
                {
                    loader: "postcss-loader",
                    options: {
                        postcssOptions: {
                            plugins: [["autoprefixer"]]
                        },
                    },
                },
                "sass-loader",
            ],
        },
    ],
},

ふたつめの定義方法は、公式ドキュメントにも記載あり。

▶︎参考サイト

・Github

https://github.com/postcss/autoprefixer#options

・npm

・ブログ



以上。

いいなと思ったら応援しよう！