webpack
15篇文章 · 0订阅
  • 【webpack】你所不知道的sourceMap
    通常，js代码出错，控制台会提示第几行第几列代码出错。但是webpack打包压缩后的代码，都被压缩到了一行，变量也变成了a,b,c,d。代码出错，控制台就没法正确的提示错误位置。 sourceMap就可以解决这个问题。sourceMap就是一个信息文件，里面储存着打包前的位置信…
    Webpack
  • 走进 Tapable
    webpack4 之后，看着编写 插件(Plugin) 的 "套路"，总会好奇：tap、tapAsync是什么？
    Webpack
    走进 Tapable
  • 你不知道的「pitch loader」应用场景
    「图文并貌」 探索Webpack团队设计Pitch Loader的含义，从Loader的设计哲学带你掌握Pitch Loader的真实应用场景。
    Webpack 前端
    你不知道的「pitch loader」应用场景
  • 看完这篇别再说不会Rollup系列（typescript，postcss，babel）
    前言 在前端领域摸爬滚打这些年，大部分时间都花在了组件上，但大多是做着做着就放弃了，例如去年疫情期间闲来无聊用stencil写了个webcomponent组件库【mui】，组件基本上都完善的差不多，可
    rollup.js 前端
    看完这篇别再说不会Rollup系列（typescript，postcss，babel）
  • 使用 rollup 打包 JS
    rollup 采用 es6 原生的模块机制进行模块的打包构建，rollup 更着眼于未来，对 commonjs 模块机制不提供内置的支持，是一款更轻量的打包工具。rollup 比较适合打包 js 的 sdk 或者封装的框架等，例如，vue 源码就是 rollup 打包的。而 w…
    rollup.js
    使用 rollup 打包 JS
  • 『Webpack系列』—— loader配置详解
    从语法角度看，loader是一个普通的Node.js模块，只是必须以函数格式导出来供使用。如果有必要可以使用一切Node.js功能模块。 从功能角度看，loader是在Webpack中作用于指定格式的资源文件并将其按照一定格式转换输出。例如：less-loader将less文件…
    Webpack
    『Webpack系列』—— loader配置详解
  • 『Webpack系列』—— SplitChunks插件用法详解
    SplitChunks插件是什么呢，简单的来说就是Webpack中一个提取或分离代码的插件，主要作用是提取公共代码，防止代码被重复打包，拆分过大的js文件，合并零散的js文件。 提到前端优化，提取公共代码是必不可少的手段。在Webpack出现前，提取公共代码是人为去处理，而Sp…
    Webpack
    『Webpack系列』—— SplitChunks插件用法详解
  • 『Webpack系列』—— MiniCssExtractPlugin插件用法详解
    用某度翻译后：“该插件将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。它支持CSS和SourceMap的按需加载。” 搭建个简单的Wenpack Demo，演示一下。 先安装MiniCssExtractPlugin插件。 安装成功后，在webpack…
    Webpack
    『Webpack系列』—— MiniCssExtractPlugin插件用法详解
  • 『Webpack系列』—— 路由懒加载的原理
    说起路由懒加载，大家很快就知道怎么实现它，但是问到路由懒加载的原理，怕有一部分小伙伴是一头雾水了吧。下面带大家一起去理解路由懒加载的原理。 路由懒加载也可以叫做路由组件懒加载，最常用的是通过import()来实现它。 然后通过Webpack编译打包后，会把每个路由组件的代码分割…
    Webpack
    『Webpack系列』—— 路由懒加载的原理
  • 『Webpack系列』—— externals用法详解
    如果小伙伴有做过首屏加载时间优化，应该会遇到chunk-vendors.js这个文件，巨大无比，加载时间超长，是首屏加载时间过长的罪魁祸首之一。 下面通过一个实际的项目来演示，先通过插件webpack-bundle-analyzer来可视化地查看chunk-vendors.js…
    Webpack Vue.js
    『Webpack系列』—— externals用法详解