以下内容均以webpack配置中的output.library.type: 'umd'为基础 使用webpack将文件打包为library后，打包好的文件被script标签引用时，library的名字会被放在全局变量中等待使用，至于库名下的内容，则与webpack配置中的output.library.export属性值相关。
转载
2021-10-28 23:15:00
194阅读
第一步：安装 webpack工具1 配置淘宝库文件地址：防止国外镜像效果不好执行命令：npm install -g cnpm --registry=ht
原创
2023-03-02 05:36:33
128阅读
Css 处理
提取 Css 成单独文件
Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式
这样对于网站来说，会出现闪屏现象，用户体验不好
我们应该是单独的 Css 文件，通过 link 标签加载性能才好
1. 下载包
npm i mini-css-extract-plugin -D
2. 配置
webpack.prod.js
const p
原创
2024-03-18 08:16:39
78阅读
webpack5中默认会进行tree shaking，只要是满足模块化与mode=production 就能剔除掉被没有被使用到的代码 css中的tree shaking 使用purgecss-webpack-plugin插件，具体配置如下 const PurgeCSSPlugin = requir ...
转载
2021-08-03 20:49:00
516阅读
2评论
一、五个概念 entry：哪个文件为入口起点开始打包 output：输出的资源到哪里去，叫什么名字 loader：翻译官，webpack只能处理js代码，其他要交给loader来处理。 plugins，插件，执行范围更广的任务，如压缩 mode。开发模式(development)：本地可以运行就可以 ...
转载
2021-10-05 13:17:00
350阅读
点赞
2评论
此博客仅供自身学习使用 webpack介绍 根据入口文件的依赖关系，将资源引进来，形成chunk代码块，根据不同资源进行编译，这个处理过程我们叫做打包，打包输出的文件叫做bundle webpack五个核心概念 entry 入口 output 出口 loader（类似于翻译官，因为webpack本身 ...
转载
2021-08-20 16:23:00
361阅读
2评论
32、webpack详细配置 33、webpack详细配置之entry entry: 入口起点 string --> './src/index.js'，单入口 打包形成一个 chunk。 输出一个 bundle 文件。此时 chunk 的名称默认是 main array --> ['./src/in ...
转载
2021-08-30 16:11:00
258阅读
2评论
1. webpack 介绍2. webpack 基本使用3. webpack 5大核心概念4. web
原创
2023-07-25 11:00:35
72阅读
提升打包构建速度
一、HotModuleReplacement
为什么
开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。
所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。
是什么
HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整
原创
精选
2024-03-20 08:22:28
168阅读
为提升老vue2项目的webpack编译速度，node_modules/webpack/node_modules/schema-utils/dist/v
原创
2022-07-11 10:52:21
889阅读
1.webpack概念 WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 构建就是把源代码转换成发布到线上的可执行 JavaScrip
转载
2018-11-05 16:40:00
135阅读
一、速度分析安装插件speed-measure-webpack-pluginnpm install --save-dev speed-measure-webpack-plugin复制代码引入插件、创建插件对象const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); //引入插件const smp = new SpeedM
转载
2021-01-31 11:21:03
5823阅读
2评论
eslint 是什么 ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 相似，除了少数的例外： ESLi...
转载
2021-06-15 23:34:36
3077阅读
前言上文讲解了一个最基本的 Webpack 使用的示例。通过执行 wbpack 命令就可以进行打包，但是这种方式很受限，入口文件必须为 src/index.js，输出文件只能是 dist/main.js。为了更加灵活的使用 Webpack，我们来了解一下它的常用配置，以及配置文件的使用。常用配置示例仓库该系列的代码示例已经上传到 Github，点此访问。入口配置默认为 src/index.js，通
原创
2023-04-05 00:09:57
351阅读
Opt-in webpack 旨在注重构建安全而非性能。我们没有打算默认启用这一功能，主要原因在于此功能虽然有 95% 几率提升性能，但仍有 5% 的几率中断你的应用程序/工作流/构建。 什么是缓存失效？webpack 需要确认 entry 的缓存何时会失效，并在失效时不再将其用于构建。因此，当你应
原创
2022-09-23 16:57:32
249阅读
webpack5 新出了个特性: 模块联邦。大家可能虽然听说过，但还没在项目中使用，今天就带大家实战一下。 业务场景 假设公司有个业务集群，公共业务组件库升级了
原创
2022-06-07 20:21:36
406阅读
Webpack 是一个模块打包工具。自 2012年3月10日诞生，Webpack 到今年已经是一个有着悠久历史的老牌构建工具了。Webpack 基于 Node.js 开发，默认采用了 CommonJS 模块化规范。每一个文件都是一个模块，默认支持的模块类型有 .js 和 .json。对于其他类型的模块，比如 .vue，.jsx，.ts、.css 以及图片类型的模块，都需要安装对应的 loader
原创
2023-04-04 13:01:08
146阅读
优化代码运行性能
Code Split
为什么
打包代码时会将所有 js 文件打包到一个文件中，体积太大了。我们如果只要渲染首页，就应该只加载首页的 js 文件，其他文件不应该加载。
所以我们需要将打包生成的文件进行代码分割，生成多个 js 文件，渲染哪个页面就只加载某个 js 文件，这样加载的资源就少，速度就更快。
是什么
代码分割（Code Split）主要做了两件事：
分割文件：将打包生成
原创
精选
2024-03-27 08:13:48
295阅读
webpack5 新出了个特性: 模块联邦。大家可能虽然听说过，但还没在项目中使用，今天就带大家实战一下。 业务场景 假设公司有个业务集群，公共业务组件库升级了
原创
2022-06-07 20:21:52
726阅读
官网一，打包图片文件1file-loadernpm install --save-dev file-loader默认情况下，生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始
原创
2021-09-08 10:22:45
426阅读
