webpack4抽取公共模块“SplitChunksPlugin”

Question

前端小白 第一次接触webpack 在配置抽取公共类的时候出现了问题
module.exports = {
mode: 'production',
context: path.resolve(__dirname),
entry: {

// 'commons':['./src/page/commons/index.js'],
'index':['./src/page/index/index.js'],
'login':['./src/page/login/index.js']

},// 入口，表示，要使用 webpack 打包哪个文件
output: { // 输出文件相关的配置

path: path.resolve(__dirname, './dist'), // 指定 打包好的文件，输出到哪个目录中去
filename: 'js/[name].js', // 这是指定 输出的文件的名称
chunkFilename: 'js/[name].chunk.js'

},
externals:{

'jquery':'window.jQuery'

} ,
devServer: { // 这是配置 dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些

//  --open --port 3000 --contentBase src --hot
open: true, // 自动打开浏览器
port: 3000, // 设置启动时候的运行端口
contentBase:  'src', // 指定托管的根目录
hot: true // 启用热更新 的 第1步

},

optimization: {
splitChunks: {

  cacheGroups: {
      vendor: {
          name: "vendor",
          test: /[\\/]node_modules[\\/]/,
          chunks: "all",
          priority: 10 // 优先级
      },
      common: {
          name: "common",
          test: /[\\/]src[\\/]/,
          minSize: 1024,
          chunks: "all",
          priority: 5
      }
  }

}
},

以上是我的配置文件 但是我打包以后为何在 dist下面的js文件夹下没有产生新的打包文件 如common.js