webpack autoprefixerコンパイルされません。

Question

前提・実現したいこと

webpack初心者です。
こちらのサイトを参考にhttps://qiita.com/tonkotsuboy_com/items/377913c51b1ac00deffe
autoprefixerとバージョン指定を行っているのですがコンパイルされません。
詳しい方原因を教えてください。
どうぞよろしくお願いいたします。

エラーの原因はpackage.jsonの中身にあると思うのですが
分かりません。

発生している問題・エラーメッセージ

PS C:\Users\81907\Desktop\workspace\tmp> yarn add postcss-loader autoprefixer --dev
yarn add v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "win32" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > postcss-loader@4.1.0" has unmet peer dependency "postcss@^7.0.0 || ^8.0.1".
warning " > autoprefixer@10.0.2" has unmet peer dependency "postcss@^8.1.0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 21 new dependencies.
info Direct dependencies
├─ autoprefixer@10.0.2
└─ postcss-loader@4.1.0
info All dependencies
├─ @babel/code-frame@7.10.4
├─ @babel/helper-validator-identifier@7.10.4
├─ @babel/highlight@7.10.4
├─ @types/parse-json@4.0.0
├─ autoprefixer@10.0.2
├─ callsites@3.1.0
├─ cosmiconfig@7.0.0
├─ error-ex@1.3.2
├─ import-fresh@3.2.2
├─ is-arrayish@0.2.1
├─ js-tokens@4.0.0
├─ json-parse-even-better-errors@2.3.1
├─ lines-and-columns@1.1.6
├─ normalize-range@0.1.2
├─ num2fraction@1.2.2
├─ parent-module@1.0.1
├─ parse-json@5.1.0
├─ path-type@4.0.0
├─ postcss-loader@4.1.0
├─ resolve-from@4.0.0
└─ yaml@1.10.0
Done in 2.63s.
PS C:\Users\81907\Desktop\workspace\tmp> npx webpack
[webpack-cli] Compilation finished
asset app.bundle.js 19 KiB [emitted] (name: app)   
asset sub.bundle.js 860 bytes [emitted] (name: sub)
runtime modules 931 bytes 4 modules
cacheable modules 9.16 KiB
  modules by path ./src/ 951 bytes
    modules by path ./src/*.js 116 bytes
      ./src/app.js 79 bytes [built] [code generated]
      ./src/sub.js 37 bytes [built] [code generated]
    modules by path ./src/*.scss 835 bytes
      ./src/app.scss 408 bytes [built] [code generated]
      ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/app.scss 427 bytes [built] [code generated]
  modules by path ./node_modules/ 8.23 KiB
    ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
    ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
webpack 5.6.0 compiled successfully in 1340 ms

該当のソースコード

package.jsonコードになります。

{
  "name": "tmp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^10.0.2",
    "css-loader": "^5.0.1",
    "postcss-loader": "^4.1.0",
    "sass": "^1.29.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.6.0",
    "webpack-cli": "^4.2.0"
  }, 
  "browserslist": [
    "last 1 version",
    "> 1%",
    "IE 10"
  ]
}

webpack.config.jsのコードになります。

const path = require('path');

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

postcss.confing.jsのコードになります。

module.exports = {
  plugins: [
    require('autoprefixer')({
      browsers: ['last 2 versions', 'ie >= 11', 'Android >= 4']
    })
  ]
}