webpack4
yuan溜溜
佛系码农
展开
-
webpack4中的devtool配置
webpack4中的devtool配置为什么有时候需要配置devtooldevtool配置选项是用来控制是否生成source map,以及如何生成source map什么是source map它是一个储存源代码和打包代码映射关系信息的文件,专门用于调试和debugsource map作用因为sourceMap是一个映射关系,所以可以把打包后出错的代码位置和源代码对应的代码位置对应,这样我们可以很快定位错误webpack4关于devtool的默认配置mode:developmen原创 2020-08-26 21:14:09 · 2252 阅读 · 0 评论 -
webpack4打包iconfont
webpack4打包iconfont在日常开发中,项目中引入一些图标是十分常见的事情,那么遇到这样的图标,我们在打包项目的时候该如何配置webpack呢?首先我们需要一个loaderfile-loader需要到iconfont矢量图标库下载相应的图标如果还不知道怎么从阿里矢量图标库下载并且应用下载的图标,可以看我之前写过的一篇文章iconfont使用的三种方式把下载好的矢量图标文件夹,放项目的font文件夹在index.css文件中引入iconfont.css文件/原创 2020-08-26 20:17:32 · 939 阅读 · 0 评论 -
webapck4图片引入打包
webapck4打包图片在webpack中loader通常会被用来打包一些webpack不能识别的非js文件,像图片这样的文件就需要借助一些特定的loader来实现打包上线运行,对于打包图片这样的文件其中涉及到的loader:url-loaderfile-loaderloader作用是否发送http请求适用的图片url-loaderurl-loader 会将引入的图片以 base64编码并打包到文件中,最终只需要引入这个dataURL就能访问图片了。当然,如果图片较大原创 2020-08-26 20:10:11 · 264 阅读 · 0 评论 -
webpack4样式篇(抽离压缩css)
webpack4样式篇(下)上一篇总结了样式打包的配置,这一篇主要总结如何抽离出css,压缩css,压缩js其中涉及到的plugin:mini-css-extract-pluginoptimize-css-assets-webpack-pluginterser-webpack-pluginplugin作用mini-css-extract-plugin把css抽离成单独的文件optimize-css-assets-webpack-plugin把抽离出来的css代码原创 2020-08-26 20:00:27 · 870 阅读 · 0 评论 -
webpack4打包样式篇(less/sass/css)
webpack4打包样式篇(上) 我们都知道webpack是模块打包机,他可以打包不同类型的文件,但是对于非js得文件,我们需要借助一些loader来帮助我们打包,这一小节主要介绍借助一些样式loader帮助我们打包一些.css,.less,.sass文件其中涉及到的loader有:style-loadercss-loaderless-loaderpostcss-loaderloader作用style-loader会把之前css-loader解析的css内容挂载到原创 2020-08-24 21:45:07 · 809 阅读 · 0 评论