- 综合排序
- 最热优先
- 最新优先
- 来自专栏一名前端开发
webpack5基础
sass-loader pnpm install sass sass-loader --save-dev 处理图片资源 webpack4处理图片资源通过file-loader和url-loader webpack5 filename: "static/images/[hash:10][ext][query]", }, }, 自动清空上次打包内容 webpack4通过插件来自动清空上次打包结果，webpack5
57120编辑于 2023-10-26 - 来自专栏一名前端开发
webpack5高级
怎么用 下载包 npm i --save-dev @vue/preload-webpack-plugin 本来使用的是 preload-webpack-plugin，但其与webpack5不兼容所以采用其替代品
65040编辑于 2023-10-26 - 来自专栏站长的编程笔记
Webpack5 快速入门
webpack 是代码编译工具，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具，俗称: 打包工具
76410编辑于 2022-12-06 - 来自专栏dmhsq_csdn_blog
webpack5学习笔记
webpack5学习笔记 看的是b站的千峰教育的视频 感觉很不错 千峰课程视频 cdn资源 cdn资源 webpack官网 webpack插件 webpack笔记 解决作用域问题 快速执行函数 ;(function // } http2: true, //开启 http2 https默认自签名 historyApiFallback: true //历史路径 } 模块热替换和热加载 热替换 hmr在webpack5
3K40编辑于 2022-01-26 - 来自专栏Java崽
【前沿技术】Webpack5
1 引言 先说结论：Webpack5 模块联邦让 Webpack 达到了线上 Runtime 的效果，让代码直接在项目间利用 CDN 直接共享，不再需要本地安装 Npm 包、构建再发布了！ 模块联邦是 Webpack5 新内置的一个重要功能，可以让跨应用间真正做到模块共享，所以这周让我们通过 webpack-5-module-federation-a-game-changer-in-javascript-architecture 模块联邦方式 终于提到本文的主角了，作为 Webpack5 内置核心特性之一的 Federated Module： 从图中可以看到，这个方案是直接将一个应用的包应用于另一个应用，同时具备整体应用一起打包的公共依赖抽取能力 Searchexposes[name]/[exposes_name] 3 总结 模块联邦为更大型的前端应用提供了开箱解决方案，并已经作为 Webpack5 官方模块内置，可以说是继 Externals 另外 Webpack5 还内置了大量编译时缓存功能，可以看到，无论是性能还是多项目组织，Webpack5 都在尝试给出自己的最佳思路，期待 Webpack5 正式发布，前端工程化会迈向一个新的阶段。
32810编辑于 2024-03-15 - 来自专栏dmhsq_csdn_blog
webpack5学习笔记
// } http2: true, //开启 http2 https默认自签名 historyApiFallback: true //历史路径 } 模块热替换和热加载 热替换 hmr在webpack5
2.2K20编辑于 2022-04-13 - 来自专栏Web技术学苑
揭秘webpack5模块打包
在上一节中我们初步了解了webpack可以利用内置静态模块类型(asset module type)来处理资源文件，我们所知道的本地服务，资源的压缩，代码分割，在webpack构建的工程中有一个比较显著的特征是，模块化，要么commonjs要么esModule,在开发环境我们都是基于这两种，那么通过webpack打包后，如何让其支持浏览器能正常的加载两种不同的模式呢？
1.1K20编辑于 2022-07-28 - 来自专栏技术综合
Webpack5结合mockjs
webpack5之前使用的是devServer.before来配置mock服务, 到了webpack5则改为devServer.setupMiddlewares 参考文档: https://webpack.js.org
1.2K20编辑于 2022-09-28 - 来自专栏code秘密花园
Webpack5 让我头疼！
这是一个非常大的突破性变化，也引起了很多争议，下面就是一位 NPM 包维护者对 Webpack5 的吐槽。 npm 上的大多数软件包主要是使用 Node.js 开发的。
82620发布于 2020-11-10 - 来自专栏Web技术学苑
webpack5资源最佳加载方案
react或者vue工程应用，这其中我们使用了加载文件，我们在之前处理文件使用file-loader或者url-loader处理，url-loader主要是可以针对图片文件大小进行有选择的base64压缩，在webpack5 中可以用内置的Asset Modules来处理图片资源 接下来我们一起探讨学习下webpack5中关于Asset Modules[1]的那些事 正文开始... /public/index.html' }) ] }; 注意我们加载图片没有使用file-loader与url-loader，我们使用的是webpack5内置的asset/rosource 关于内置模块的几个参数 主要参考官网asset-modules[2] webpack5之前 row-loader 将文件导入为字符串，比如导入.txt类型的文件 url-loader 将文件作为Data 之前我们加载图片资源文件使用file-loader或者url-loader在webpack5中可以使用内置模块type: 'assets/resource' 基于webpack5内置模块asset module
1.1K20编辑于 2022-07-28 - 来自专栏各类技术文章~
Webpack5里好用的插件（—）
介绍 本期给大家在webpack5中如何配置css用到的解析和插件的使用，更准确的说是PostCSS的插件。 postcss autoprefixer // 或者 npm install postcss autoprefixer --save-dev 复制代码 接下来，我们要在postcss-loader里配置插件，注意webpack5 结语 我们本期介绍完了三个webpack5中postcss的插件，相信如果自己搭建脚手架使用了这些会对你的前端开发效率会有极大提升。
1.3K32发布于 2021-10-09 - 来自专栏大宇笔记
《webpack5 实战五》之资源模块
总结 webpack5 引入资源干掉了一堆loader，改为type 模式loader,更清晰。本文示例详细，文章没有提及到的请查看demo。 webpack5实战源码
99950编辑于 2022-03-09 - 来自专栏一道题做一宿
基于Webpack5实现微前端架构
从Webpack5开始，已经内置了对微前端开发的支持，它们提供了一个新的功能叫Module Federation（我也不知道该怎么翻译这个术语会比较恰当），提供了足够的能力来让我们实现微前端开发。 return ( <main>
a Demo for Micro-Frontend using Webpack5 1.1K20发布于 2021-08-13 - 来自专栏各类技术文章~
webpack5热更新打包TS
webpack5热更新打包 热更新，是指 Hot Module Replacement，缩写为 HMR。 mode development" } 注意： 这里千万要注意，start的运行命令要写作webpack serve而不是webpack-dev-server 因为使用webpack-dev-server是webpack5 本篇文章的重点其实并不在于如何打包typescript，反而是在于如何配置webpack的热更新devServer 关于如何在webpack5中配置typescript，我发现在官方网站上也有说明：https
2.5K11发布于 2021-09-22 - 来自专栏大宇笔记
《webpack5 实战三》之html打包
前言：项目一直在用webpack 打包，也系统的跟着B站的视频教程去学过，但是总是觉得差了点什么，有些配置还是不知道，决定把一些例子写下来总结下知识点，顺便学习下webpack5。
69420发布于 2021-04-13 - 来自专栏前端卡卡西
webpack5手动搭建vuecli
webpack5搭建vuecli 话不多说，先上最终打包结果对比图： 原本使用vue脚手架写的项目，在没做优化的情况下，最终的打包结果： 段落引用使用webpack5自己手动搭建的vue脚手架，且做了代码优化后的最终打包结果
56710编辑于 2022-02-25 - 来自专栏胡哥有话说
Webpack5 开箱体验~欢迎品鉴
目前Webpack5已经处于beta阶段。 中实现功能而不引入任何重大更改 通过引入重大更改来为将来的功能做准备，以使我们能够尽可能长时间地使用 v5 npm安装 cnpm i webpack@next webpack-cli -D { "name": "webpack5 webpack5 // webpack.config.js module.exports = { mode: 'production' }; ? 如：output.ecmaVersion: 2015 SplitChunk // webpack4 minSize: 30000; 可以对JS和css做代码切割 // webpack5 minSize
79710发布于 2020-11-03 - 来自专栏前端精读评论
精读《Webpack5 新特性 - 模块联邦》
1 引言 先说结论：Webpack5 模块联邦让 Webpack 达到了线上 Runtime 的效果，让代码直接在项目间利用 CDN 直接共享，不再需要本地安装 Npm 包、构建再发布了！ 模块联邦是 Webpack5 新内置的一个重要功能，可以让跨应用间真正做到模块共享，所以这周让我们通过 webpack-5-module-federation-a-game-changer-in-javascript-architecture 模块联邦方式 终于提到本文的主角了，作为 Webpack5 内置核心特性之一的 Federated Module： 从图中可以看到，这个方案是直接将一个应用的包应用于另一个应用，同时具备整体应用一起打包的公共依赖抽取能力 3 总结 模块联邦为更大型的前端应用提供了开箱解决方案，并已经作为 Webpack5 官方模块内置，可以说是继 Externals 后最终的运行时代码复用解决方案。 另外 Webpack5 还内置了大量编译时缓存功能，可以看到，无论是性能还是多项目组织，Webpack5 都在尝试给出自己的最佳思路，期待 Webpack5 正式发布，前端工程化会迈向一个新的阶段。
2.8K20编辑于 2022-03-14 - 来自专栏大宇笔记
《webpack5 实战四》之loader
前言：项目一直在用webpack 打包，也系统的跟着B站的视频教程去学过，但是总是觉得差了点什么，有些配置还是不知道，决定把一些例子写下来总结下知识点，顺便学习下webpack5。
1K20编辑于 2022-03-09 - 来自专栏前端时空
Webpack5 跨应用代码共享 - Module Federation
Webpack 5 的消息尽管已经出来了许久，但是正式版一直还未发布。Webpack 5 的 ChangeLog 中，除了常规的性能优化、编译提速之外，有一个比较让人期待的功能就是 Module Federation。Module Federation 可以强行翻译成「模块联邦」，但是听起来很是怪异，我在某个前端群也抛出了这个问题，没想到大家的回复也是五花八门。所以，本文就直接用 Module Federation 了，不进行翻译听起来好像更舒服一点。
3.1K22发布于 2020-09-23
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号