webpack + autoprefixerでベンダープレフィックス付与させたい。

package.json

json
1{
2  "name": "starter-theme",
3  "version": "1.0.0",
4  "description": "",
5  "private": true,
6  "scripts": {
7    "build": "webpack --mode=production",
8    "build:dev": "webpack --mode=development --watch"
9  },
10  "keywords": [],
11  "author": "",
12  "license": "ISC",
13  "devDependencies": {
14    "@babel/core": "^7.7.7",
15    "@babel/preset-env": "^7.7.7",
16    "autoprefixer": "^9.8.4",
17    "babel-loader": "^8.0.6",
18    "css-loader": "^3.4.0",
19    "jquery": "^3.4.1",
20    "mini-css-extract-plugin": "^0.9.0",
21    "node-sass": "^4.13.0",
22    "optimize-css-assets-webpack-plugin": "^5.0.3",
23    "postcss-loader": "^3.0.0",
24    "sass-loader": "^8.0.0",
25    "style-loader": "^1.1.2",
26    "terser-webpack-plugin": "^2.3.1",
27    "webpack": "^4.41.5",
28    "webpack-cli": "^3.3.10"
29  }
30}
31

webpack.config.js

js
1const path = require("path");
2const MiniCssExtractPlugin = require("mini-css-extract-plugin");
3const TerserPlugin = require("terser-webpack-plugin");
4const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
5
6module.exports = (env, argv) => ({
7  watch: true,
8  entry: "./assets/js/src/index.js",
9  output: {
10    filename: "bundle.js",
11    path: path.resolve(__dirname, "assets/js"),
12  },
13
14  // 最適化オプションを上書き
15  optimization: {
16    minimizer: [new TerserPlugin({}), new OptimizeCssAssetsPlugin({})],
17  },
18
19  // ソースマップの設定
20  devtool: "source-map",
21
22  module: {
23    rules: [
24      // babel-loaderの設定
25      {
26        test: /.js$/,
27        use: [
28          {
29            loader: "babel-loader",
30            options: {
31              presets: ["@babel/preset-env"],
32            },
33          },
34        ],
35        exclude: /node_modules/,
36      },
37      // css/sass-loaderの設定
38      {
39        test: /.(sa|sc|c)ss$/,
40        use: [
41          MiniCssExtractPlugin.loader,
42          {
43            loader: "css-loader",
44            options: {
45              url: false,
46              sourceMap: true,
47            },
48          },
49          "sass-loader",
50        ],
51      },
52      // PostCSSのための設定
53      {
54        loader: "postcss-loader",
55        options: {
56          // PostCSS側でもソースマップを有効にする
57          sourceMap: true,
58          plugins: [
59            // Autoprefixerを有効化
60            // ベンダープレフィックスを自動付与する
61            require("autoprefixer")({
62              grid: true
63            })
64          ]
65        }
66      }
67    ],
68  },
69
70  plugins: [
71    new MiniCssExtractPlugin({
72      filename: "../styles/bundle.css",
73    }),
74  ],
75});

error
1npm run build:dev                                                        
2
3> starter-theme@1.0.0 build:dev /Users/akihirohanai/My_project/3_ugr.hokkaido.jp/app/wp-content/themes/ver.3_theme
4> webpack --mode=development --watch
5
6
7webpack is watching the files…
8
9Hash: 983db68a01c30db0ca32
10Version: webpack 4.41.5
11Time: 152ms
12Built at: 2020/07/07 15:33:30
13        Asset      Size  Chunks                   Chunk Names
14    bundle.js  4.38 KiB    main  [emitted]        main
15bundle.js.map  3.53 KiB    main  [emitted] [dev]  main
16Entrypoint main = bundle.js bundle.js.map
17[./assets/js/src/index.js] 591 bytes {main} [built] [failed] [1 error]
18
19ERROR in ./assets/js/src/index.js
20Module build failed (from ./node_modules/postcss-loader/src/index.js):
21SyntaxError
22
23(1:1) Unknown word
24
25> 1 | import "../../styles/src/style.scss";
26    | ^
27  2 | import $ from "jquery";
28  3 | import { slickslide } from "./modules/slick";

ちなみに、index.jsは以下の通り

js
1import "../../styles/src/style.scss";
2import $ from "jquery";
3import { slickslide } from "./modules/slick";
4
5slickslide();

webpack.config.jsの下記の記述を消すとエラーは起きません。

webpack.config.js

js
1// PostCSSのための設定
2     {
3        loader: "postcss-loader",
4        options: {
5          // PostCSS側でもソースマップを有効にする
6          sourceMap: true,
7          plugins: [
8            // Autoprefixerを有効化
9            // ベンダープレフィックスを自動付与する
10            require("autoprefixer")({
11              grid: true
12            })
13          ]
14        }
15      }