Autoprefixerでベンダープレフィックスを付与したい

Question

実現したいこと

Webpackを使ってバンドルする際にベンダープレフィックスを付与したい。

前提

現在の作業ディレクトリは以下の通りです。

├── node_modules
├── public
│   └── bundle.js
├── src
│   ├── app.js
│   ├── app.scss
│   └── index.html
├── package.json
├── postcss.config.js
├── webpack.config.js
└── yarn.lock

各種設定ファイルは以下の通りです。

webpack.config.js

const path = require("path");

module.exports = {
  mode: "development",
  devtool: "none",
  entry: "./src/app.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.scss$/,
        use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"]
      }
    ]
  }
};

postcss.config.js

module.exports = {
  plugins: [require("autoprefixer")]
};

エントリーポイントとしているapp.jsは以下の通りです。

import "./app.scss";

console.log("this is a main js file.");

app.jsでインポートしているapp.scssは以下の通りです。

h1 {
  font-size: 2em;
  transition: all 0.3s;
  color: blue;
  border-radius: 3px;

  &:hover {
    transform: translateX(50px);
    color: red;
  }
}

発生している問題

上記の設定でwebpackコマンドを実行したところ、ビルドはエラーなく成功するのですが、バンドルされたJavaScriptファイルでベンダープレフィックスが付与されていません。

exports.push([module.i, "h1 {\n  font-size: 2em;\n  transition: all 0.3s;\n  color: blue;\n  border-radius: 3px;\n}\nh1:hover {\n  transform: translateX(50px);\n  color: red;\n}", ""]);

補足情報

パッケージのバージョンは以下の通りです。

package.json

{
  "name": "sample",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^9.7.4",
    "css-loader": "^3.4.2",
    "postcss-loader": "^3.0.0",
    "sass": "^1.26.2",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3"
  },
  "dependencies": {
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  }
}

ビルドした際のログ

$ webpack
Hash: 005d3818be3ef8a0bc48
Version: webpack 4.42.0
Time: 655ms
Built at: 2020-03-03 7:03:50
    Asset      Size  Chunks             Chunk Names
bundle.js  16.1 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js!./src/app.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js!./src/app.scss 384 bytes {main} [built]
[./src/app.js] 62 bytes {main} [built]
[./src/app.scss] 644 bytes {main} [built]
    + 2 hidden modules

Answer 1

Autoprefixerを使う場合、どのブラウザに対してベンダプレフィックスを使うか指定する必要があります。.browserlistrcファイルに定義しておくなど、適宜定義してください（参考）。

---

transformやborder-radiusにプレフィックスが必要なブラウザはかなり古いものに限られますので、それらをターゲットとしないのであればプレフィックスのないもので問題ない、という結論も考えられます。

Comments

[kozukata]

丁寧なご回答誠にありがとうございます。
ご指摘の通り、`.browserlistrc`に古いバージョンのIEを定義してビルドしたところ、期待通りのベンダープレフィックスが付与されました。
迅速かつ適切なご回答いただき、大変助かりました。改めて、ありがとうございました。