-
plugins(插件)作用更大,可以打包优化,资源管理和注入环境变量
-
loader: loader是文件加载器,能够加载资源文件,直接对文件进行操作,最后进行打包, 处理一个文件可以使用多个loader,loader的执行顺序是和本身的顺序是相反的,即最后一个loader最先执行,第一个loader最后执行。 第一个执行的loader接收源文件内容作为参数,其他loader接收前一个执行的loader的返回值作为参数。最后执行的loader会返回此模块的JavaScript源码
-
plugin: webpack启动后,在读取配置的过程中会执行new MyPlugin(options)初始化一个MyPlugin获取其实例 · 在初始化compiler对象后,就会通过compiler.plugin(事件名称,回调函数)监听到webpack广播出来的事件 · 并且可以通过compiler对象去操作webpack 虽然俩者都可以对webpack进行一定的拓展,但是loader更像是一个转换器,直接操作文件进行转换 。plugin是一个扩展器,它丰富了wepack本身,针对于loader结束后,webpack打包的整个过程,它并不直接操作文件,而是基于事件机制工作,会监听webpack打包过程中的某些节点,
什么是bundle,chunk,module
bundle是webpack打包出来的文件,chunk是webpack在进行模块的依赖分析的时候,代码分割出来的代码块。module是开发中的单个模块
webpack-dev-server和http服务器如nginx有什么区别
webpack-dev-server使用内存来存储webpack开发环境下的打包文件,并且可以使用模块热更新,相比传统http服务器开发更加简单高效
什么是模块热更新
webpack的一个功能,可以使代码修改后不用刷新浏览器就自动更新,高级版的自动刷新浏览器,devServer中通过hot属性可以控制模块的热替换
webpack的环境拆分
环境拆分:主要有两种方式
-
第一种方式是将开发环境配置和生成环境配置分离,并配置一个公共配置,在对应的环境下调用 merge方法将公共配置的内容merge到当前环境的配置中,实现环境分离;
-
第二种方式是开发环境和生成环境配置写在同一个文件中,通过在script脚本中设置NODE_ENV区分当前环境,在配置文件中通过 process.env.NODE_ENV 获取当前环境,调用对应的配置。需要注意window在使用NODE_ENV时可能会出现问题,可以安装cross-env 并配置在script脚本中解决该问题。
webpack-dev-server的作用
webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。
webpack-dev-server 主要提供两个功能:
1.为静态文件提供web服务
2.自动刷新和热替换(HMR)
自动刷新指当修改代码时webpack会进行自动编译,更新网页内容
热替换指运行时更新各种模块,即局部刷新
webpack-dev-server支持两种模式来自动刷新页面
-
iframe模式(页面放在iframe中,当发送改变时重载) 无需额外配置,只要以这种格式url访问即可。
http://localhost:8080/webpack-dev-server/index.html
-
inline模式(将webpack-dev-server的客户端入口添加到bundle中) inline模式下url不用发生变化,但启动inline模式分两种情况
// 以命令行启动webpack-dev-server有两种方式
// 方式1 在命令行中添加–inline命令
// 方式2 在webpack-config.js添加devServer:{inline: true}
// 以node.js API启动有两种方式
// 方式1 添加webpack-dev-server/client?http://localhost:8080/到webpack配置的entry入口点
config.entry.app.unshift(“webpack-dev-server/client?http://localhost:8080/”);
// 将添加到html文件中
使用过webpack里面哪些plugin和loader
loader
-
babel-loader: 将ES6+转移成ES5-
-
css-loader,style-loader:解析css文件,能够解释@import url()等
-
file-loader:直接输出文件,把构建后的文件路径返回,可以处理很多类型的文件
-
url-loader:打包图片
什么是长缓存?在webpack中如何做到长缓存优化
-
浏览器在用户访问页面的时候,为了加快加载速度会对用户访问的静态资源进行存储,但是每一次代码升级或更新都需要浏览器下载新的代码,最简单方便的方式就是引入新的文件名称。
-
webpack中可以在output中指定chunkhash,并且分离经常更新的代码和框架代码。通过NameModulesPlugin或HashedModuleIdsPlugin使再次打包文件名不变
什么是Tree-shaking?CSS可以Tree-shaking
Tree-shaking是指在打包中取出那些引入了但在代码中没有被用到的死代码。
webpack中通过uglifysPlugin来Tree-shaking JS。CSS需要使用purify-CSS
如何提高webpack的构建速度
-
通过externals配置来提取常用库
-
利用DllPlugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译,再通过DllReferencePlugin将预编译的模块加载进来。
-
使用Happypack 实现多线程加速编译