方法一：optimization

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

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    //单入口
    entry:'./src/js/index.js',
    // entry: {
    //     //多入口：有一个入口，最终输出就有一个bundle
    //     main:'./src/js/index.js',
    //     test:'./src/js/test.js'
    // },
    output: {
        //[name]取文件名
        filename: 'js/[name].[contenthash:10].js',
        path: resolve(__dirname, 'build'),
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            minify: {
                collapseWhitespace: true,
                removeComments: true
            }
        })
    ],
    /*
        1.可以将node_modules中代码单独打包一个chunk最终输出
        2.自动分析多入口chunk中，有没有 公共的文件，如果有会打包成单独一个chunk
    */
    optimization:{
        splitChunks:{
            chunks:'all'
        }
    },
    mode: 'production',
}

推荐：方法二：optimization+import动态导入

index.js

function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}

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

// eslint-disable-next-line
console.log(sum(1, 2, 3));
// eslint-disable-next-line
console.log(mul);

test.js

export function mul(x, y) {
  return x * y;
}
export function count(x, y) {
  return x - y;
}