Webpack
文章平均质量分 55
Webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图,然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。
aiguangyuan
要全身心的投入,程序才会有些感觉!
展开
-
Webpack提取页面公共资源
在做React开发时,经常需要引入react和react-dom基础库,这样在打包的时候速度就会比较慢,这种情况下我们可以将这些基础库忽略掉,将它们通过CDN的方式直接引入,而不打包到bundle文件里面去。此插件是Wabpack4内置的,无需安装,用于替代CommonsChunkPlugin插件。原创 2023-01-15 18:40:34 · 1985 阅读 · 0 评论 -
Webpack 中使用source map 在开发过程中进行调试
我们都知道webpack在打包的时候会将源代码打包成一个bundle文件,bundle文件就是经过了loader转换,还有webpack的一些插件处理,以及webpack构建过程中的一些转换,最后会生成一个大的JS文件,直接去看这个文件是没法调试的。source map是在开发过程中的一个利期,通过它我们在调试的时候可以定位到源代码,阮一峰老师的写的比较详情细,大家可以去看看。source map一般是在开发环境开启,而在线上环境关闭,否则会暴露业务逻辑,非常不安全。原创 2023-01-12 23:03:17 · 563 阅读 · 0 评论 -
Webpack实现多页面打包
多页面应用(MPA)概念。单页面在开发时会把所有的业务放在一个大的入口里面去,不同的子业务还是同一个URL地址,只不过后面的hash会有所不同。多页面相对于单页面的区别在于,项目发布上线以后,有多个入口文件,每一次页面跳转的时候,后台服务器都会返回一个新的html文档,这种类型的网站也就是多页面网站,也叫多页应用。多页面有什么优势呢?主要有以下两点:1. 多个页面之间是解耦的,利于维护;2. 多页面对SEO更加友好;原创 2023-01-09 00:46:01 · 1766 阅读 · 0 评论 -
Webpack打包时将文件内联
在编写前端代码时,有些文件作为单独的文件引用会更便于维护,但是有些文件却必须要内联。文件内联的场景如下:1. 页面加载时需要初始化的代码需要内联;2. 一些上报与回传的打点的代码需要内联;3. 为了避免页页闪动,首屏渲染的CSS代码需要内联;4. 减少HTTP的网络请求次数,将小图片或字体文件直接内联;在Webpack中内联html和javaScript代码可以通过raw-loader这个插件来完成。原创 2023-01-08 19:26:01 · 581 阅读 · 0 评论 -
Webpack实现将CSS中的px转换为rem
由于现在众多移动设备的兴起,各种手机厂商推出了许多不同屏幕尺寸大小的手机型号,前端人员在编写代码时就需要适配各种手机屏幕。传统的样式适配是利用CSS 的媒体查询,但是这种方式要为每一种规格尺寸的屏幕写一套代码适配,比较繁琐。这种情况下,利用rem来实现移动端的适配会更为方便一点。在W3C中,对rem的定义是相对于根元素字体的大小,即根元素的字体大小是10px,那2rem的实际尺寸就是20px。在Webpack中我们可以利用px2rem-loader这个插件在打包时,自动的将px转换为rem,非常方便。原创 2023-01-08 18:33:40 · 1636 阅读 · 0 评论 -
Webpack中给CSS自动添加前辍
由于现在主流的浏览器有好几种,在编写CSS样式时,需要对各种浏览器作兼容处理,导致在写一些新的CSS样式时需要针对不同的浏览器加上不同的前辍,如果每个前辍都手动来加的话会相当的麻烦。如何才能方便快捷的加上这些前辍呢?其实我们可以借助Webpack中的插件autoprefixer来完成这个功能,它是CSS中的一个后置处理器,与Less和Sass不同,Less和Sass是CSS的预处理器,是在打包前处理,而后置处理器是在打包完成以后进行后置处理。原创 2023-01-06 21:25:26 · 646 阅读 · 1 评论 -
Webpack自动清理打包目录
Webpack在打包的时候,会在指定输出文件夹下面生成打包文件,但是上次打包的文件不会自动清理掉,每次手动删除会比较麻烦,为此,我们需要有一个自动清理的功能。常见的自动清理方式有以下两种:1. 通过 npm scripts 清理理构建目录;以上命令即在执行打包前,先删除打包输出目录dist,然后再执行打包操作。2.使用 clean-webpack-plugin 插件清理;安装插件;配置Webpack文件......原创 2023-01-05 18:23:01 · 871 阅读 · 1 评论 -
Webpack中压缩代码文件
在开发完成后,代码正式上线都需要对代码进行压缩,这样代码资源会变的更小,访问速度也会变的更快。在Webpack 4.x以上版本以上内置了uglifyjs-webpack-plugin 插件,会对JS文件自动压缩,不需要做其它的任何操作。也可以手动安装这个插件,设置一些另外的参数,比如开启并行压缩,加快打包的速度。原创 2023-01-04 22:19:19 · 940 阅读 · 0 评论 -
Webpack中的文件指纹
1. 什么是文件指纹?文件指纹就是打包后输出的文件名的后缀,主要用来对修改后的文件做版本区分。2. 文件指纹有哪几种?Hash:和整个项目的构建相关,只要项目文件有修改,整个项目构建的 hash 值就会更改,一般用于图片设置;Chunkhash:与webpack 打包的 chunk 有关,不同的 entry 会生成不同的 chunkhash 值,一般用于设置JS文件;Contenthash:根据文件内容来定义 hash ,文件内容不变,则 contenthash 不变.....原创 2023-01-03 22:38:56 · 2079 阅读 · 3 评论 -
Webpack中的文件监听与热更新
轮询判断文件的最后编辑时间是否变化,某个文件发生了变化,并不会立刻告诉监听者,而是先缓存起来,等待设置的缓存等待时间过后再去执行。--config webpack.dev.js => 开发模式下,执行webpack.dev.js;插件可以不刷新浏览器实现热更新,它在更新时不输出磁盘,而是将更新的存在内存里面。上面两种方式的缺点是每次需要手动刷新浏览器,为了方便开发,我们需要用到热更新。1. 启动 webpack 命令时,带上 --watch 参数;--open => 构建完成后,自动的开启浏览器。原创 2023-01-02 17:22:25 · 795 阅读 · 1 评论 -
Webpack解析文件和资源
需要注意的是,由于loader是链式调用,执行顺序也是从右到左,所以在填写规则时,要先写style-loader,然后再写css-loader,实际在执行时,会通过css-loader去处理,然后将处理的规则传递给style-loader。webpack解析css文件流程,首先通过css-loader 加载 .css 文件,并且转换成 commonjs 对象,然后通过style-loader 将样式通过标签插入到head中。在webpack配置文件的moudle里面添加解析规则。原创 2023-01-02 13:56:04 · 218 阅读 · 0 评论 -
Webpack核心概念
1. 核心概念 EntryEntry 用来指定 webpack 的打包入口。依赖图的入口是 entry,通过该入口,将代码、图片、字体等 依赖不断加入到依赖图中。Entry 的用法:单入口:entry 是一个字符串;多入口:entry 是一个对象;2.核心概念 Output,Output 用来告诉 webpack 如何将编译后的文件输出到磁盘......原创 2023-01-01 19:03:36 · 299 阅读 · 0 评论 -
Webpack安装与配置
Webpack默认的配置文件为webpack.config.js,当然也可以通过webpack --config命令来指定配置文件。webpack配置组成主要由打包的入口文件、打包的输出、打包的环境、Loader配置、插件配置这几部分组成。原创 2022-12-29 00:37:59 · 1156 阅读 · 0 评论 -
Webpack中设置图片不转base64格式
在开发过程中,图片转成base64是常有的事,如上传图片,但是有些情况下确不希望将图片转成base64,因为转成base64后图片不容易区分,也就不能根据图片名称去做一些其它的操作,那么如何才能在Webpack中禁止图片转成base64呢?其实很简单,只需要修改Webpack的配置文件webpack.base.conf.js即可,将里面module下的rules中的图片处理的option 的......原创 2020-03-04 15:00:04 · 3907 阅读 · 0 评论 -
Webpack基础
Webpack是一个静态资源打包工具,可以把JS及其所依赖的css和图片(都认为是一个模块)打包为一个.js文件,让客户端浏览器只引入最终的js文件,从而实现减少HTTP请求的目的,优化访问速度。1.安装 Node Js2.全局安装webpacknpm i -g webpack3.创建 NPM 项目文件package.jsonnpm init 执行完输入相关............原创 2019-01-18 01:21:56 · 220 阅读 · 0 评论