webpack autoprefixerでのメッセージ

Question

バージョン

"webpack": "^4.26.0",
"autoprefixer": "^9.6.0",

概要

webpackを実行すると見慣れないエラーが表示されました

 Replace Autoprefixer browsers optionto Browserslist config.
  Use browserslist key in package.jsonor .browserslistrc file.

  Using browsers option cause some error. Browserslist config
  can be used for Babel, Autoprefixer,postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist

autoprefixerのオプションをpackage.jsonに書けみたいな雰囲気だと思い、
webpack.common.jsで書いていたバージョン指定をpackage.jsonに追加してみました。

  "browserslist": [
    "last 2 version"
  ]

しかし、このメッセージは表示されたままでした。
どうすれば解決するのでしょうか？

また、動作自体に影響はないのでしょうか？

webpack.common.js

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {

  entry: {
    './application.js': './_src/js/_index.js',
    './style.css': './_src/sass/_index.sass',
  },

  output: {
    path: __dirname,
    filename: '[name]'
  },

  module: {
    rules: [
      {
        test: /.js$/,
        use: [{
        loader: 'babel-loader',
        options: {
          presets: 'env'
        }
        }],
        exclude: /node_modules/,
      },
      {
        test: /.sass$/,
        use: [
          ExtractTextPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              url: false,
              sourceMap: true,
              minimize: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              plugins: [
                autoprefixer({
                  browsers: 'last 2 versions',
                  grid: true
                })
              ]
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          },
        ]
      }
    ]
  },

  plugins: [
    new ExtractTextPlugin('[name]'),
  ]

};

Answer 1

Using browsers option cause some error.

にあるとおりbrowsersオプション使うとエラーだよという意味で
下記該当箇所を削除してください。

webpack.common.js

          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              plugins: [
                autoprefixer({
                  browsers: 'last 2 versions', //この行削除してください
                  grid: true //今回の質問には関係ないですがautoprefixer9.6では(autoplace|no-autoplace|off)となります
                })
              ]
            }
          },

動作自体に影響があるかどうかは、CSSの検証が必要ですが、
設定箇所も定義名も変わったのでエラーにしているのだと思います。
なのでbrowsersオプションの設定は効いてないと思いますが、
未検証なのでそこは吐き出されるcssの差分を見れば確認できるでしょう。

Comments

[退会済みユーザー]

ご回答ありがとうございます。
ご指摘の通り、browserの行を削除したらエラーは消えました。
コンパイル結果を見たら、ベンダープレフィックスが今まで通り付与されていたのでひとまずこの設定で開発を進めます。
ありがとうございました。