webpack打包构建的本质

100 阅读2分钟

打包

使用工具抓取(plugin)、处理(loader)并将我们的源码模块串联成可以在浏览器中运行的文件。

模块化的代码最终会变成什么?

webpack本质上就是一个将我们平时写的模块化代码转成浏览器可以直接执行的代码。webpack会将代码转化IIFE(自执行代码),放入一个数组中,然后进行required。

变成自执行代码的同时,还会做什么--热更新

热更新:将修改的代码进行编译,然后自动上传到本地服务器上,服务器去重新请求最新的代码,然后刷新页面。如果没有热更新,你写了代码,要先经过lodaer,甚至plugin,输出到出口文件,然后部署上传到本地服务器上,浏览器刷新之后才能看到你修改的最新代码。

变成自执行代码的同时,还会做什么--loader

会使用vue-template-lodaer对vue代码进行转化,使用loader对 less stylus 进行转化等等

变成自执行代码的同时,还会做什么--pligin

使用 babel-plugin-transform-runtime 对ES6转化为ES5的冗余代码进行删除,使用common-chunck-plugin对公共代码进行提取。

变成自执行代码的同时,还会做什么--输出到指定路径和重命名文件

对打包之后的文件进行重新命名和把打包之后的文件输出到指定的路径下面。

变成自执行代码的同时,还会做什么--进行寻址和解决跨域问题

使用proxy代理进行请求转发,通过alias和resolve进行寻址,找到对应的模块。

变成自执行代码的同时,还会做什么--将静态资源自动放到CDN上

可以通过webpack配置将资源自动放到CDN上

#对于vue现在有三种部署方式, webpack + vue vueclib vite