谈谈你对webpack的看法webpack是一个模块打包工具，你可以用它来管理项目中的模块依赖，编译输出模块所需的静态文件。可以很好的管理和打包开发中使用的HTML、CSS、JavaScript和静态文件（图片、字体），让开发更高效。对于不同类型的依赖，webpack都有对应的模块加载器，会分析模块之间的依赖关系，最后合并生成优化的静态资源。webpack的基本功能和工作原理？代码转换：将TypeScript编译成JavaScript，将SCSS编译成CSS等文件优化：压缩JavaScript、CSS、HTML代码，压缩合并图片等代码分割：提取多个页面的公共代码，提取不需要的代码首屏执行其异步加载模块合并：一个模块化项目中有很多模块和文件，需要构建将模块分类合并到一个文件中自动刷新：监听本地源码变化，自动构建，刷新浏览器代码验证：在代码提交仓库前，需要检查代码是否符合规范，单元测试是否通过自动发布：代码更新后，自动构建线上发布代码并传输至释放系统。webpack构建过程从入口配置的模块开始，递归解析入口所依赖的所有模块。当找到模块时，会根据配置的loader找到对应的转换规则进行模块转换，然后解析出当前模块所依赖的模块。它将按条目分组。一个条目及其所有依赖的模块将被划分为一个组Chunk。最后，webpack会将所有Chunk转换为文件输出。整个过程中，webpack会适时执行插件中定义的逻辑webpack打包原理。将所有依赖打包成一个bundle.js，将代码分成单元片段按需加载。什么是webpack，gulp和grunt有什么区别？一个打包文件。区别：webpack支持代码拆分、模块化（AMD、CommonJ、ES2015）、全局解析什么是入口、输出？entry入口，告诉webpack使用哪个模块作为构建项目的起点，默认为./src/index.jsoutputexit，告诉webpack将其打包后的代码输出到哪里以及如何命名，默认为./dist什么是loader、plugins？loader是用来告诉webpack如何将某种类型的文件进行转换，并导入到打包好的文件中。Plugins（插件）比较好用，可以打包优化，资源管理，注入环境变量。什么是包、块、模块？bundle是webpack打包的文件，chunk是webpack进行模块依赖分析代码块时的代码拆分。模块是开发中的单个模块。如何自动生成webpack配置？可以使用一些官方的脚手架webpack-clivue-cli//首先安装npminstall-g@vue/cli//新建一个项目hellovuecreatehellonuxt-cli//一定要安装npx，npm5默认安装了npx。2.0//新建工程hellopxcreate-nuxt-apphellowebpack如何配置单页和多页应用？单页module.exports={entry:'./path/to/my/entry/file.js'}多页应用module.entrys={entry:{pageOne:'./src/pageOne/index.js',pageTwo:'./src/pageTwo/index.js'}}webpack-dev-server和nginx等http服务器有什么区别？webpack-dev-server在webpack开发环境中使用内存存储打包文件，并且可以使用模块热更新，比传统的httpserver开发更简单高效。什么是模块热更新？webpack的一个功能是修改代码后无需刷新浏览器就可以自动更新代码。高级版自动刷新浏览器dev-server如何运行？webpack-dev-server支持两种模式自动刷新页面iframe模式（页面放在一个iframe中，发送变化时重新加载）不需要额外配置，只要访问这种格式的url即可。http://localhost:8080/webpack-dev-server/index.htmlinline模式（将webpack-dev-server的client入口添加到bundle中）inline模式下url不需要改，但是有两种情况需要启动内联模式//有两种方式从命令行启动webpack-dev-server//方法1在命令行中添加--inline命令//方法2在webpack-config中添加devServer:{inline:true}。js//asnode有两种方式启动.jsAPI//方法1在webpack配置config.entry.app.unshift的entry入口添加webpack-dev-server/client?http://localhost:8080/("webpack-dev-server/client?http://localhost:8080/");//添加tothehtmlfileusedwebpackloader中有哪些插件和loaderbabel-loader：转ES6+到ES5-css-loader，style-loader：解析css文件，可以解释@importurl()等file-loader：直接输出文件,并返回构造的文件路径，可以处理多种类型的文件esurl-loader:packagepictures//url-loader增强版file-loader，小于限制转base64，大于限制调用file-loadernpminstallurl-loader-D//使用module.exports={模块：{规则：[{测试：/\.(png|jpg|gif)$/，使用：[{loader：'url-loader'，选项：{outputPath:'images/',limit:500//将小于500B的文件打包成Base64格式写入JS}}]}]}}pluginshtml-webpack-plugin:compresshtmlconstHtmlWebpackPlugin=require('html-webpack-plugin')module.exports={//...plugins:[newHtmlWebpackPlugin({filename:'index.html',//配置输出文件名和路径template:'./public/index.html',//配置待编译的html文件hash:true,//压缩=>生产模式使用minify:{removeAttributeQuotes:true,//删除双引号collapseWhitespace:true//将html折叠成一行}})]}clean-webpack-plugin:packer清理源目录文件，清理webpackpackager中的dist目录npminstallclean-webpack-plugin-D//修改webpack.config.jsconstcleanWebpackPlugin=require('clean-webpack-plugin')module.exports={plugins:[newcleanWebpackPlugin(['dist'])]}webpackInst中babel实现的详细答案参考前端高级面试题所有npmi-D@babel-preset-env@babel-corebabel-loader@babel-preset-env:可以让我们灵活设置代码目标执行环境@babel-core:babel核心库babel-loader:webpackbabel插件允许我们在webpack.babelrc{"presets":['@babel/preset-env']}配置中运行babel配置webpack.config.jsmodule.exports={entry:'./src/index.js'，输出：{路径：path.resolve(__dirname，'dist')，文件名：'bundle.js'}，模块：{规则：[{测试：/\.js$/，排除：/node_modules/，使用:{loader:'babel-loader'}}]}}提取公共代码module.exports={optimization:{splitChunks:{common:{//提取公共代码块:'initial',name:'common',//打包文件名minChunks:2,//最少2个引用minSize:0//超过0字节则生成新包},styles:{//提取通用代号:'styles',test:/\.css$/,chunks:'all',minChunks:2,enforce:true},vendor:{//提取第三方插件test:/node_modules/,chunks:'initial',name:'vendor',//打包后的文件名priority:10//设置优先级防止提取自定义公共代码时被覆盖，不打包}}}}whatIs它是一个长缓存？webpack中如何实现长缓存优化？当用户访问页面时，浏览器会存储用户访问的静态资源以加快加载速度，但每次代码升级或更新都需要浏览器下载新的代码，最简单方便的方法是引入一个新的文件名在webpack中，可以在输出中指定chunkhash，将频繁更新的代码和框架代码分开。使用NameModulesPlugin或HashedModuleIdsPlugin保持打包文件名不变。什么是摇树？CSS可以Tree-shaking吗？Tree-shaking是指在打包过程中去除代码中引入但未使用的死代码。通过webpack中的uglifysPlugin摇树JS。CSS需要使用purify-CSS来继承8种原型链。继承要点：子对象的原型对象是new的，父对象的实例Child.prototype=newParent();缺点：多个实例对引用类型的操作会被构造函数篡改继承重点：在子构造函数内部调用父构造函数Parent.call(this)缺点：无法实现复用，无法继承原型属性/方法组合继承重点：使用原型链继承共享属性和方法，通过借用构造函数继承实例PropertyfunctionChild(name,age){//继承的属性Parent.call(this,name)this.age=age}//继承方法Child.prototype=newParent()Child.prototype.constructor=Child;缺点：无论在任何情况下，父构造函数都会被调用两次，一次是创建子类型原型，一次是在子构造函数内部创建子类型原型。继承要点：对给定的对象进行浅拷贝在ES5中，Object.create()可以替代上面的方法object()varperson1=Object.create(person);缺点：prototype链式继承的多个实例的引用类型属性指向同一个点，存在被篡改的可能；参数不能传寄生继承要点：在原型继承的基础上，增强对象返回构造函数createAnother(obj){varclone=object(obj);//在ES5中使用//varclone=Object.create(obj);//增强对象clone.sayHi=function(){};returnclone;}varperson1=createAnother(person)缺点：同原型继承寄生结合继承重点：结合构造函数传参和寄生模式实现继承//借用构造函数增强子类实例属性（支持传参，避免篡改）functionChild(name,age){//继承属性Parent.call(this,name)this.age=age}functioninheritPrototype(Child,Parent){varprototype=Object.create(Parent.prototype);prototype.constructor=孩子；Child.prototype=prototype;}//将父类的原型指向子类，这样子类就可以使用父类原型链的属性/方法inheritPrototype(Child,Parent)；优点：构造函数只调用一次，原型链不变，是最成熟的继承方式方法重点：使用Object.assign将父类原型上的方法复制到子类原型上，让子类instance实例可以使用父类方法Object.assign(Child.prototype,Parent.prototype);Child.prototype。构造函数=孩子；ES6classextends重点：使用extends表示继承自哪个父类，子类构造函数中必须使用super，可以看成Parent.call(this,value)classParent{constructor(value){this。val=value}}classChildextendsParent{constructor(value){super(value)this.val=value}}
