前端框架基础知识

- 日理万妓 2022-10-08 00:48 201阅读 0赞

## Webpack ##

const { resolve} =require('path');
    module.exports={ 
        //入口文件 entry(Webpack以那个文件作为入口起点开始打包),默认./src/index.js
        //如果只有一个入口,使用字符串,指定一个入口文件
        // entry:'./src/index.js',
        // 多入口Array数组的格式,所有的入口会形成一个chunk,名称是默认的,输出也是只有一个bundle
        // entry:["./src/index.js","./src/main.js"],
    
        //对象的格式Object 多入口有几个入口文件就会生成几个chunk兵书出bundle chunk的名称是key
        entry:{ 
            one:'./src/index.js',
            two:'./src/main.js'
        },
        //开发模式
        mode:'production',//生产模式production 开发模式development
        //出口文件 webpack打包后资源bundles输出到哪里,如何命名
        output:{ 
            filename:'[name].js',//打包后的名字
            path:resolve(__dirname,'build')//路径
        },
        //Loader 处理不是JS资源css img等,将他们识别成能识别的资源
        module:{ 
            rules:[
    
            ]
        },
        //plugins插件,可用于执行范围更广的任务,打包优化,压缩
        
    }

const { resolve} =require('path');
    module.exports={ 
        //入口文件 entry(Webpack以那个文件作为入口起点开始打包),默认./src/index.js
        //如果只有一个入口,使用字符串,指定一个入口文件
        // entry:'./src/index.js',
        // 多入口Array数组的格式,所有的入口会形成一个chunk,名称是默认的,输出也是只有一个bundle
         entry:["./src/index.js","./src/main.js"],
    
    
        //开发模式
        mode:'production',//生产模式production 开发模式development
        //出口文件 webpack打包后资源bundles输出到哪里,如何命名
        output:{ 
            filename:'bundel.js',//打包后的名字
            path:resolve(__dirname,'build')//路径
        },
        //Loader 处理不是JS资源css img等,将他们识别成能识别的资源
        module:{ 
            rules:[
    
            ]
        },
        //plugins插件,可用于执行范围更广的任务,打包优化,压缩
        
    }