Webpack5完整教程
文章平均质量分 87
webpack5完整的学习记录,持续更新中
Yushia-Lin
从来没有长大,但从来都没有停止生长
展开
-
webpack(一) 安装和配置
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。原创 2022-04-04 11:14:16 · 3093 阅读 · 0 评论 -
webpack(二)样式文件兼容及打包
一、loader简介由于Webpack打包入口目前只配置了一个index.js文件,那么其他需要被打包的文件都必须通过模块化方式引入该文件才行,而默认情况下,引入的文件必须是js文件(如上面添加的module.js)。那么其他文件类型该如何进行打包呢?这时我们就要用到Webpack中所提供的各种loader,它就是专门用于处理除JS文件之外的其他格式文件的编译、提取、合并、打包等工作的。其中CSS文件的打包需要用到css-loader和style-loader两个loadercss-loader原创 2022-04-04 20:23:06 · 919 阅读 · 0 评论 -
webpack(三)加载处理其他资源(图片、图标)
图片打包关键要用到 file-loader 或url-loader,其中 url-loader 与 file-loader` 功能基本一致,只不过 url-loader能将小于某个大小的图片进行base64格式的转化处理。在webpack5之后,我们可以直接使用资源模块类型(asset module type)来替代file-loader、url-loader。原创 2022-04-05 13:00:45 · 1045 阅读 · 0 评论 -
webpack(四) js 浏览器兼容
对于es6语法,一些浏览器或者低版本浏览器是不兼容的,因此需要项目在打包编译的时候自动将es6语法转换成es5。原创 2022-04-06 11:19:39 · 1557 阅读 · 0 评论 -
webpack(五) 常用plugins
webpack中的plugin,赋予其各种灵活的功能,例如打包优化、资源管理、环境变量注入等,它们会运行在 webpack 的不同阶段(钩子 / 生命周期),贯穿了webpack整个编译周期原创 2022-04-06 23:07:39 · 3266 阅读 · 0 评论 -
webpack(六)搭建本地服务器及代理配置
webpack提供了一个可选的本地开发服务器,基于node.js搭建,内部使用express框架,让浏览器自动刷新修改后的结果。原创 2022-04-09 12:04:13 · 4460 阅读 · 0 评论 -
webpack(七)环境分离
在实际开发实践中,为了方便开发调试和上线,项目中我们一般配置两个 Webpack 配置,一个是开发环境一个是生产环境,开发环境帮助我们快速开发测试联调,生产环境保证上线环境的打包流程是最优化体验,这就是配置文件根据环境进行拆分。...原创 2022-04-11 21:51:44 · 147 阅读 · 0 评论 -
webpack(八)代码分离
我们的 js 都是打包输出到一个文件中的,当内容越来越多的时候,会导致单个文件体积十分巨大,所以我们就需要对代码进行分割,将一个巨大的文件,分割成多个中小型文件,然后可以按需加载或并行加载这些文件代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的bundle,以及控制资源加载优先级,如果使用合理,会极大缩减加载时间。常用的代码分离方法有三种:入口起点:使用 entry 配置手动地分离代.原创 2022-04-13 09:44:11 · 1704 阅读 · 0 评论