方式一

// 多入口：有一个入口，最终输出就有一个bundle

使用多个入口
entry: {
    index:"./src/index.js",
    test:"./src/test.js"
  },
  output: {
    filename: "bundle[name].[contenthash:10].js",
    path: resolve(__dirname, "dist"),
  },

方式二

1. 可以将node_modules中代码单独打包一个chunk最终输出

2. 自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk

 //配置
optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },

方式三

1. 可以将node_modules中代码单独打包一个chunk最终输出
   1. 自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk

使用：

在webpack.config.js
 //配置
optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },

在js代码中

index.js中引入test.js

/*
  通过js代码，让某个文件被单独打包成一个chunk
  import动态导入语法：能将某个文件单独打包
*/
import(/* webpackChunkName: 'test' */'./test')
  .then(({ mul, count }) => {
    // 文件加载成功~
    // eslint-disable-next-line
    console.log(mul(2, 5));
  })
  .catch(() => {
    // eslint-disable-next-line
    console.log('文件加载失败~');
  });