webpack-code split代码分割

在前面的学习中，可以发现，js代码都打包成了一个文件。

 这样使得js文件很大，影响加载速度，我们希望能将文件进行分割，这样可以实现多个文件并行加载，速度更快，另外代码分割之后还可以实现按需加载等功能。

代码分割方法一：通过入口文件进行代码分割

项目里面有两个js文件（index.js，test.js），可以通过设置entry实现多个入口，从而打包生成多个js文件。

    // 单入口
    // entry:'./src/js/index.js',
    // 多入口
    entry:{
        main:'./src/js/index.js',
        test:'./src/js/test.js'
    },

output修改输出文件名filename:'js/[name].[contenthash:10].js',

    output: {
        // 输出文件名
        // filename: 'built.js',
        // [name]:取entry中的文件名，如果entry中是main，则输出就是main，如果是test输出就是test
        filename:'js/[name].[contenthash:10].js',
        // 输出文件路径-写路径是要写绝对路径
        // __dirname是nodejs的变量，代表当前文件的目录绝对路径，在这里当前文件指的就是webpack.config.js
        // 第二个参数，当前路径下的哪个文件中，这里指的就是打包后的资源输出到当前路径下的build文件夹中
        //连上上面的filename，就是打包资源输出到当前文件路径下的build文件夹中的built.js文件中
        path: resolve(__dirname, 'build')
    },

执行webpakc命令