webpack学习---优化-- js文件拆分(将合并的一个js分割成多个,并行加载)

 js文件拆分,将打包后多个js合并的一个js分割成多个,并行加载

        1. 多入口模式和splitChunks配合,可以将js拆分成多个,并且可以将node_modules中代码单独打包,公共的文件打包成单独一个chunk

        2. 单入口模式和splitChunks配合,可以将node_modules中代码单独打包

        3, 单入口模式和splitChunks加上在js中用import动态导入语法,能将某个文件单独打包,并且可以将node_modules中代码单独打包

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

                module.exports = {
                // 单入口
                // entry: './src/js/index.js',
               
                //多入口
                entry: {
                    index: './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'
                };

 

        index.js中分离js方式

                /*
                通过js代码，让某个文件被单独打包成一个chunk
                import动态导入语法：能将某个文件单独打包

                webpackChunkName: 'test'  在js中给分离出去的js命名
                */
                import(/* webpackChunkName: 'test' */'./test')
                .then(({ mul, count }) => {
                    // 文件加载成功~
                    // eslint-disable-next-line
                    console.log(mul(2, 5));
                })
                .catch(() => {
                    // eslint-disable-next-line
                    console.log('文件加载失败~');
                });