How to properly configure chainWebpack in Vuepress with MiniCssExtractPlugin

[wedbew]

I am struggling with configuring webpack (chainWebpack) in config.js file in Vuepress. After starting a development server the web page is blank and the console looks like on the screen below. The funniest thing is that my styles are added properly to the application which you can see on the next screen - and it is even working with hot reloading. What I wanted to achieve is to create a separate file with styles of components that will be loaded after the vuepress native styles for theme. I have also a question about how to add properly another loader after the css-loader because adding another use method and after it, loader appears to not matching the webpack-chain API.

chainWebpack (config, isServer) {
  if (!isServer) {
    config
      .entry('index')
        .add(path.resolve(process.cwd(), './docs/.vuepress/index.js'))
        .end()
    config.plugin('vue-style-loader').use(MiniCssExtractPlugin, [{
      filename: '[name].css',
      chunkFilename: '[id].css',
    }])
    config.module.rule('css-module')
      .test(/\.css$/)
      .use('mini-css')
        .loader(MiniCssExtractPlugin.loader)
        .options({
          hmr: process.env.NODE_ENV === 'development',
          reloadAll: true,
        })
        .end()
      .use('css-loader')
      .loader('css-loader')
  }
}

Environment Info:

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz
  Binaries:
    Node: 14.4.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 85.0.4183.102
    Edge: Not Found
  npmPackages:
    @vuepress/core:  1.5.3
    @vuepress/theme-default:  1.5.3
    vuepress: ^1.5.3 => 1.5.3
  npmGlobalPackages:
    vuepress: Not Found

[alexander-akait]

Please use stackoverflow for questions