正文 使用元素位置判断元素是否在当前视区 这种方法实现起来比较简单, 我们一步一步来。首先:编写一个 util 函数 isVisible,它将仅接收一个参数,即 elemen...
注意 loader配置好以后,是按照从下到上,从右到左的配置顺序执行的。 假如有一个index.css文件,里边内容是这样的 然后,我把这个css文件引入JS文件 这个时候,...
实际上,当我们打包之后,生成的dist目录下的这几个文件,应该是交给后端放到服务器上,服务器上就可以运行这些文件。假设,我们已经把代码放到了服务器上运行了 假如我们我们现在的...
假如我们同时引入了lodash和jquery 然后运行打包npm run build,这个时候会报一个文件过大的警告 出现警告的原因是因为同时引入两个库,打包生成的文件会比较...
webpack 打包的过程中,怎么使用一些环境变量呢? 我们之前分了3个配置文件image 然后我们在package.json这个包文件里,定义了3个命令分别是开发环境的命令...
之前总结的代码分割都是针对JS代码的,如果要对CSS代码进行代码分割,要怎么办呢?借助MiniCssExtractPlugin插件 在我们没有配置这个插件的时候,webpac...
或者查看dist目录下index.html文件
我们知道,webpack种chunks的默认配置是async,也就是说webpack默认只对异步代码进行代码分割。为什么会这样呢? 之前,我们引用的jquery或lodash...
什么是打包分析? 打包分析指的是,当我们用webpack对代码进行打包之后,我们可以借助一些打包分析工具,来对我们打包生成的文件进行一定的分析,看下webpack打包是否合理...
webpack打包的过程种,生成的JS文件,每一个JS文件我们都把它叫做Chunk。 我们可以看下打包的过程 main.js的chunk Name是mainvendors~l...
假如src目录下index.js里,有代码如下: 当前异步代码是,只要页面一运行,就会生成一个元素,加载到页面上。我们可以改造 一下index.js代码如下: 我们打开 目录...
本节用开发环境做代码的打包也就是运行npm run dev但是如果用webpack-dev-server启动一个服务器的话我们就看不到打包生成的内容了为了方便能看到开发环境打...
一、development(开发环境)当我们在开发项目的时候,一般是用development环境进行项目的开发,在这个打包环境下,webpack中我们使用了devServer...