webpack
文章平均质量分 89
webpack
一颗冰淇淋
这个作者很懒,什么都没留下…
展开
-
vite — 超快且方便的编译工具
vite 基于 esmodule 来处理数据,使用到工具 ESBuild,编译速度非常快css、less、typescript、react 在 vite 中可以直接使用默认配置文件 vite.config.js 可添加其它配置,如 pluginvite 提供了编译后预览的指令 npx vite preview以上就是vite 编译资源的介绍, 更多有关前端、工程化的内容可以参考我其它的博文,持续更新中~...原创 2022-08-14 20:02:42 · 2014 阅读 · 0 评论 -
Rollup 编译资源离不开 plugin
rollup主要用于处理esmodule的 js 资源,通过命令行可以直接执行,需要指定入口出口文件,以及编译的方式。默认不被支持的资源处理需要通过plugin,自己通过 commonjs 导出的资源使用,第三方库解析通过,处理 css 需要,vue 得依赖和,转换和压缩离不开和,最后通过和开启服务。区分环境通过配置参数。以上就是Rollup 编译资源的介绍, 更多有关前端、工程化的内容可以参考我其它的博文,持续更新中~...原创 2022-08-07 19:09:19 · 554 阅读 · 0 评论 -
gulp来处理html、css、js资源啦
html文件通过插件对代码压缩less文件使用插件gulp-less解析,css文件兼容性通过处理js文件使用gulp-babel进行代码转换,压缩代码配合魔法注释将资源添加到html页面中和watch为编译开启自动服务串行和并行组合任务以上就是gulp处理html、css、js资源的介绍,更多有关前端、工程化的内容可以参考我其它的博文,持续更新中~httpshttpshttpshttpshttpshttps。...原创 2022-07-31 21:42:06 · 374 阅读 · 0 评论 -
gulp使用指南
gulp主要以“流”的方式来处理资源,没有模块化,不适合大型项目。gulp每次处理即开启异步任务,可以并行、串行、监听资源的更新。使用插件,gulp也能实现代码转化、压缩等功能。以上就是gulp的介绍,更多有关前端、工程化的内容可以参考我其它的博文,持续更新中~httpshttpshttpshttpshttpshttpshttpshttps。...原创 2022-07-24 21:37:55 · 363 阅读 · 0 评论 -
一起来自定义loader吧
新建node项目,在src文件夹下的index.js中简单编写一些代码name'alice',age20,};创建loaders文件夹,在文件夹下增加用于处理loader的js文件,通过module.exports函数可以拿到需处理的文件内容,并将处理好的结果返回};在配置文件中引入自定义的loader。定义loader方式有两种通过相对路径引入(这里使用的方式)通过resolveLoader属性配置,默认会去node_modules中查询依赖。.........原创 2022-07-17 19:54:59 · 601 阅读 · 3 评论 -
通过 tree shaking 移除无用代码
tree shaking 依赖于ES Module 的静态语法分析,在项目编译时移除无用的代码以减少文件体积。在文件中,我们可能定义了变量但是暂时又没有用到,这样会造成空间的浪费。在 为 时,会默认做一些配置,将无用的代码删除。为了看到没有做处理时编译后的文件效果,在 webpack 中做如下配置。在这种配置情况下,当存在没有用到的变量时,还是照原样编译到了 js 文件中。想要移除掉 js 文件中的无用代码,开启 通过 配置这样编译后就将没有用到的变量 username 和 foo 函数都移除掉了这时候原创 2022-07-10 20:48:54 · 566 阅读 · 0 评论 -
压缩 js 代码就用 terser
中提供了压缩 js 代码的方式,可以移除无用代码、替换变量名等,减少编译后文件体积,提升加载速度。在 配置文件 中通过将 设置为 或者 ,会对代码进行不同的处理。可以发现,模式下编译的文件,文件及变量名被修改、空格换行被去除,即使自己没有进行配置,webpack 也会在我们设置 的模式时默认添加一些属性,比如这里js代码压缩用到的就是 。处理代码依赖的是 这个工具, 是可以直接安装并独立使用的,使用的时候有非常多的配置可以自行定义,具体可参考 官方文档其中属于 compress options以下属于 ma原创 2022-07-03 19:57:51 · 4717 阅读 · 0 评论 -
不要再傻傻分不清 hash、 chunkhash 和 contenthash 啦
hash、contenthash 和 chunkhash 是通过散列函数处理之后,生成的一串字符,可用于区分文件。webpack.config.js 文件中,output 中定义输出 js 文件命名,plugins 中定义的抽取 css 文件命名在 中使用 发送请求,中引入 资源编译后,虽然我们自己定义的 css 文件名为 ,但是由于它被 引入了,所以打包出来的文件名变成了 。每一次编译后,生成的文件名都一样,这样会存在一个问题,通过 webpack 编译生成的静态文件会被我们放置到服务器中,当编译后的原创 2022-06-19 20:35:52 · 1327 阅读 · 0 评论 -
这样拆分和压缩css代码
在【拆分】和【压缩】css代码之前,首先要配置 loader 处理不同的 css 资源,因为 webpack 没有默认可处理 css 资源的规则,具体可参考这一篇 webpack处理css/less资源loader 处理不同类型的 css 资源后通过 将css代码添加到 文件中,但此时 css 代码并没有生成单独的文件,而是被编译到了 js 文件中。所以在 html 页面中,css 代码是通过 标签创建的,而不是直接引入 css 资源地址。当 css 文件较多时,全部打包至 js 文件,会使得 js 文件体原创 2022-06-12 19:54:58 · 407 阅读 · 0 评论 -
cdn 引入的资源需要通过 externals 排除打包哦~
cdn 指的是通过相互连接的网络系统,使用最靠近用户的服务器将音乐、图片等资源以高效率和低成本的方式将内容传递给用户。在 webpack 中,我们可能会将引入的第三方资源会编译成单独的文件,作为静态资源放到服务器上,但有些库它本身就有 cdn 链接,通过 cdn 直接加载会使各地资源获取速度更快。在 文件中写一段简单代码,通过 发送 get 请求在 中定义 属性,将公共资源单独编译执行 后,被编译到 559.js 文件中。再将编译后的 html 文件在浏览器中打开,获取到了 get 请求的响应数据在这种原创 2022-06-05 21:57:07 · 640 阅读 · 0 评论 -
在webpack中这样分离环境和代码就好啦
前面的文章中,webpack.config.js 中包含本地调试和线上发布的所有配置,编译后的 bundle.js 包含所有的代码。当项目变大、代码量变多、配置增加的时候,文件的可维护性会越来越差,是时候对他们进行分离啦~环境分离环境分离主要是区分本地和生产两种环境,本地调试需要能实时看到代码变化,而生产环境需要编译成指定的文件。可以采用两种方式开发环境和生产环境分别定义配置文件,在 package.json 中定义对应的指令开发环境和生产环境共用配置文件,通过参数来区分环境配置文件分离原创 2022-05-29 20:06:12 · 214 阅读 · 0 评论 -
webpack dev server 与 hot module replace 提高开发效率
通过 webpack命令编译源代码时,如果我们对源代码进行了修改,需要重新执行命令才能看到编译后的效果。这样在开发中非常的影响效率,如果存在一种方式,当文件被修改时,webpack 自动监听重新编译,并反馈给开发者,这样就能更高效的进行开发。watch我们通过 webpack执行命令时,编译完成之后进程会停止,而 webpack --watch编译完成后,不会停止进程,并且当文件内容发生更改时,将重新执行编译操作。在项目中有两种配置方式package.json 中配置命令webpack.co原创 2022-05-22 20:02:06 · 566 阅读 · 0 评论 -
规范代码编写风格就用 eslint 和 prettier
eslint 可以用于规范我们的编码,使得项目中的代码风格一致,更利于阅读和维护,而 prettier 可以在当我们代码不符合 eslint 规范是进行部分自动修复。eslint通过 npm install eslint -D安装 eslint,然后执行 npx eslint --init初始化配置文件在执行 init 操作的时候,eslint 生成配置文件会问你一些问题想怎样来使用 eslint模块化的方式(Es module、commonjs)选择哪一种框架(React、Vue)是否需要原创 2022-05-15 22:22:29 · 947 阅读 · 0 评论 -
来会会babel这个重要且神奇的工具
babel 在前端工程化开发中发挥着至关重要的作用,它能将较高级的语法转成浏览器可识别的代码,无论中 es6 中 const 、promise 还是 React、TypeScript。以下babel在线工具中左侧输入代码,右侧为编译后的结果,设置需要浏览器兼容的版本后,可以看到 “const” 编译成 “var”,“箭头函数” 编译成 “普通函数”。命令行使用babel 和之前说到的 postcss 一样,可以通过命令行运行,解析文件夹或者文件。安装命令行工具所需要的依赖,npm install @原创 2022-05-08 21:55:40 · 1622 阅读 · 0 评论 -
26种source-map看花了眼?别急,理解这几个全弄懂
上一篇 webpack处理模块化源码 的文章中提到了 “source map”,这一篇来详细说说。有什么作用source map 用于映射编译后的代码与源码,这样如果编译后的代码出错了,可以很快速的定位到源文件的位置。我们在 format.js 文件中打印一个不存在的 hello 变量, 当没有 source map 的时候,没有办法看到报错内容在源码的哪个位置。生产环境提示报错是在编译后的 bundle.js 文件,点击该文件后,只能看到压缩和丑化之后的代码。[外链图片转存失败,源站可能有防盗链原创 2022-05-04 21:11:11 · 3238 阅读 · 0 评论 -
其实webpack编译“模块化“的源码没那么难
我们在 webpack初体验 这篇文章中演示到,浏览器不支持 CommonJS ,在特定场景下才支持 Es Module ,而 webpack 可以将这些模块化的代码解析成浏览器可识别的语法。那么 webpack 究竟是对模块化做了怎样的处理呢?一起来看看。项目结构demo├─ src │ ├─ utils│ │ ├─ common_math.js│ │ └─ esmodule_format.js │ ├─ common_index.js│ ├─ esm原创 2022-04-24 20:20:10 · 451 阅读 · 0 评论 -
看,这些 plugins 常用又简单
前面文章中 体验了webpack的打包 、解析css资源 、处理图片字体等文件 接下来看看 plugins 有什么作用吧~项目路径如下,和上一篇 处理图片字体等文件 项目保持一致demo├─ src│ ├─ css│ │ ├─ index.css│ │ └─ file.css │ ├─ img│ │ ├─ portrait.png │ │ └─ sky.jpg │ ├─ js│ │ ├─ component.js│原创 2022-04-17 20:28:31 · 1081 阅读 · 0 评论 -
asset module type 替代 loader 处理图片字体等文件资源
前面文章中 体验了webpack的打包 、解析css资源 ,接下来看看项目中常用到的图片、字体、文件该怎么处理吧~项目路径如下,在上一篇 解析css资源 项目基础上增加了一些文件demo├─ src│ ├─ css│ │ ├─ index.css│ │ └─ file.css (+)│ ├─ img│ │ ├─ portrait.png (+)│ │ └─ sky.jpg (+)│ ├─ js│ │ ├─ compon原创 2022-04-10 22:05:09 · 455 阅读 · 0 评论 -
处理css/js兼容性的工具之超重要的browserslist
这篇 webpack处理css资源 文章中使用到的工具 browserslist 对于兼容性处理来说非常重要!这一篇来仔细说说。查询兼容性不同浏览器对于 css / js 的属性可能存在兼容性,具体可以通过 can i use 这个网站查询。比如 css 中的 user-select 属性,用于规定是否可以在浏览器上双击选取或者高亮,在 ie 6-9 中不可以使用,在 ie10-11 中需要添加 -ms- 前缀。也就是说,为了多浏览器兼容性处理,css代码可能要写成这样-webkit-user-原创 2022-04-06 19:15:00 · 808 阅读 · 0 评论 -
loader的三种配置方式
在这篇 webpack处理css资源 文章中使用几个常用的loader 来编译 css 代码。但其实 loader 的配置方式不止一种,一起来看看其它方式~在 webpack.config.js 中,通过 module.exports 将配置导出,使用 css-loader 来处理以 .css 结尾的文件module.exports = { module: { rules: [ { test: /\.css$/, use: ["css-loade原创 2022-03-30 21:27:08 · 1318 阅读 · 0 评论 -
webpack是如何处理css/less资源的呢
上一篇文章 体验了webpack的打包过程,其中js文件不需要我们手动配置就可以成功解析,可其它类型的文件,比如css、less呢?css-loader首先,创建一个空文件夹,通过 npm init -y 初始化项目,项目结构如下demo├─ src│ ├─ css│ │ └─ index.css│ ├─ js│ │ └─ component.js│ └─ index.js├─ index.html└─ package.json在component.js原创 2022-03-27 20:12:39 · 1420 阅读 · 0 评论 -
超详细的webpack之开始体验吧
webpack是一个前端工程化非常重要静态模块化打包工具,可以帮我们把 less、sass、esmodule、commonjs 等模块依赖处理成浏览器可识别的静态资源。虽然webpack非常好用,但它可配置项和语法非常的多,还是比较难理解和掌握的,让我们从最基础的开始,一步步体验吧~不使用webpack时浏览器可以识别部分js代码,即使没有webpack,我们代码也是能够运行在浏览器端的。使用esmodule来做一个演示,新建一个 demo 文件夹,demo 文件夹内新建 src 文件夹和 in.原创 2022-03-20 20:43:56 · 605 阅读 · 0 评论