webpackを4から5にアップデートしたら起きたこと。これはスタートに過ぎない。

PS C:\webpack5-pj> yarn build
yarn run v1.22.10
$ webpack --mode=production --display-error-details & yarn external-css & yarn cleanup
[webpack-cli] Unknown argument: --display-error-details
? Which flags do you want to use? ...
√ --entry: The entry point(s) of your application e.g. ./src/main.js
√ --config: Provide path to a webpack configuration file e.g. ./webpack.config.js
√ --color: Enable/Disable colors on console
√ --merge: Merge two or more configurations using webpack-merge e.g. -c ./webpack.config.js -c ./webpack.test.config.js --merge
√ --progress: Print compilation progress during build
√ --help: Outputs list of supported flags
√ --output-path: Output location of the file generated by webpack e.g. ./dist/
√ --target: Sets the build target e.g. node
√ --watch: Watch for files changes
√ --hot: Enables Hot Module Replacement
√ --devtool: Determine source maps to use
√ --prefetch: Prefetch this request
√ --json: Prints result as JSON or store it in a file
√ --mode: Defines the mode to pass to webpack
√ Which flags do you want to use? · No items were selected  

[webpack-cli]
Executing CLI

(node:32) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
[webpack-cli] Error: Prevent writing to file that only differs in casing or query string from already written file.
This will lead to a race-condition and corrupted files on case-insensitive file systems.
C:\webpack5-pj\dist\sample\smooth-scroll\index.html
C:\webpack5-pj\dist\sample\smooth-scroll\index.html
    at writeOut (C:\webpack5-pj\node_modules\webpack\lib\Compiler.js:565:20)
    at C:\webpack5-pj\node_modules\webpack\lib\util\fs.js:178:5
    at FSReqCallback.oncomplete (fs.js:156:23)
PS C:\webpack5-pj>  

PS C:\webpack5-pj> yarn build
yarn run v1.22.10
$ webpack --mode=production --display-error-details & yarn external-css & yarn cleanup
[webpack-cli] Unknown argument: --display-error-details
? Which flags do you want to use? ...
√ --entry: The entry point(s) of your application e.g. ./src/main.js
√ --config: Provide path to a webpack configuration file e.g. ./webpack.config.js
√ --color: Enable/Disable colors on console
√ --merge: Merge two or more configurations using webpack-merge e.g. -c ./webpack.config.js -c ./webpack.test.config.js --merge
√ --progress: Print compilation progress during build
√ --help: Outputs list of supported flags
√ --output-path: Output location of the file generated by webpack e.g. ./dist/
√ --target: Sets the build target e.g. node
√ --watch: Watch for files changes
√ --hot: Enables Hot Module Replacement
√ --devtool: Determine source maps to use
√ --prefetch: Prefetch this request
√ --json: Prints result as JSON or store it in a file
√ --mode: Defines the mode to pass to webpack
√ Which flags do you want to use? · No items were selected 

const mode = require("./webpack.config/mode");
const getEntry = require("./webpack.config/entry");
const entry = getEntry();

const rules = require("./webpack.config/module/rules");

const dir = require("../../../directory-path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const HtmlWebpackSkipAssetsPlugin = require("html-webpack-skip-assets-plugin")
  .HtmlWebpackSkipAssetsPlugin;
const dir = require("./directory-path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

/**
 * htmlにjs, cssを差し込んでビルド
 */
const htmlWebpackPluginSample = (html, minify, excludeAssets) => {
  return new HtmlWebpackPlugin({
    filename: dir.sample + html,
    template: dir.src.sample + html,
    minify: minify,
    // css, jsのhtml差し込み除外
    excludeAssets: excludeAssets,
  });
};

module.exports = {
  mode: mode.MODE,
  entry: entry,

  module: {
    rules: rules,
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: "[name].css", }),
    /**
     * srcからコピーするだけ
     */
    new CopyPlugin({
      /**
       * 対象
       *
       * /sample/配下のhtml
       *
       * 除外
       *
       * /rwd-base/index.html
       */
      patterns: [
        {
          from: "**/*.html",
          to: dir.sample,
          context: dir.src.sample,
          globOptions: {
            dot: false, // .***のファイルは除外
            gitignore: false, // falseじゃないとエラーになる。
            ignore: [
              "**/rwd-base/index.html",
            ],
          },
        },
      ],
    }),
    /**
     * HTML別出し。
     *
     * 自動的にプロジェクトのjs, cssをhtmlに突っ込む。
     */
    htmlWebpackPluginSample(
      "/rwd-base/index.html",
      true,
      excludeAssetsForSample.concat([
        /\/sample\/smooth-scroll\/*/,
      ])
    ),
    htmlWebpackPluginSample(
      "/smooth-scroll/index.html",
      true,
      excludeAssetsForSample.concat([
        /\/sample\/rwd-base\/*/,
      ])
    ),
    new HtmlWebpackSkipAssetsPlugin(),
  ];
};

// (省略)

module.exports = {
  // （省略）
  plugins: [
    /**
     * srcからコピーするだけ
     */
    new CopyPlugin({
      /**
       * 対象
       *
       * /sample/配下のhtml
       *
       * 除外
       *
       * /rwd-base/index.html
       * /smooth-scroll/index.html   <--- 追加
       */
      patterns: [
        {
          from: "**/*.html",
          to: dir.sample,
          context: dir.src.sample,
          globOptions: {
            dot: false, // .***のファイルは除外
            gitignore: false, // falseじゃないとエラーになる。
            ignore: [
              "**/rwd-base/index.html",
              "**/smooth-scroll/index.html",   // <--- 追加
            ],
          },
        },
      ],
    }),
    // （省略）
  ];
};