webpack 4x - vue文件 style标签热替换失败问题

今天在开发个人博客的时候，发现在.vue文件修改style标签里样式时，不会热替换，然后就去查了下webpack文档，文档给出的答案是：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // only enable hot in development
              hmr: process.env.NODE_ENV === 'development',
              // if hmr does not work, this is a forceful method.
              reloadAll: true,
            },
          },
          'css-loader',
        ],
      },
    ],
  },
};

需要在MiniCssExtractPlugin.loader配置项中开启hmr和reload。

于是我就开心的贴了上去，一系列操作之后，发现还是不会热替换，于是乎，我就从头到尾又看了一遍MiniCssExtractPlugin的介绍，终于终于发现了问题的所在，就是new MiniCssExtractPlugin时，除了指定同步加载的css资源名(filename)，还要指定异步加载的css资源名(chunkFilename)，最终加上之后，完美的解决了~