webpack4
入门webpack的最佳实践（基于webpack4.X 5.X）-- postcss-loader介绍
导语来到这家公司之后，一直在使用webpack，也写了不少笔记，但是都比较零散，现在决定整理一下webpack相关的知识点，由浅入深，方便自己后续查漏补缺，后续会一直更新。前言前面几篇文章介绍了一些优化打包速度和打包体积的插件，除此之外，webpack社区还有非常多功能强大的插件，而本文将介绍postcss-loader的插件配置。目录postcss-loaderautoprefixerpostc
日期 2023-06-12 10:48:40入门webpack的最佳实践（基于webpack4.X 5.X）--基础篇
theme: channing-cyan导语来到这家公司之后，一直在使用webpack，也写了不少笔记，但是都比较零散，现在决定整理一下webpack相关的知识点，由浅入深，方便自己后续查漏补缺，后续会一直更新。核心概念Module模块:在webpack中，万物皆是模块，可以理解成是我们手写和引入的一个个文件。Chunk代码库: 一个chunk由十多个相关联模块组合而成，当我们写的 module
日期 2023-06-12 10:48:40
入门webpack的最佳实践（基于webpack4.X 5.X）-- 打包配置优化
导语来到这家公司之后，一直在使用webpack，也写了不少笔记，但是都比较零散，现在决定整理一下webpack相关的知识点，由浅入深，方便自己后续查漏补缺，后续会一直更新。目录在基础篇中，我们已经构造好了入口，出口，loader，以及js压缩和css压缩分离等基础配置，在本文中，将从以下几个方法进行配置的优化。多入口打包多环境打包文件指纹（hash值）source-map基础篇传送：https:/
日期 2023-06-12 10:48:40
入门webpack的最佳实践（基于webpack4.X 5.X）--打包速度优化
theme: channing-cyan导语来到这家公司之后，一直在使用webpack，也写了不少笔记，但是都比较零散，现在决定整理一下webpack相关的知识点，由浅入深，方便自己后续查漏补缺，后续会一直更新。前言当我们的项目越来越大，webpack的配置项越来越多时，构建速度会越来越慢，所以我们需要通过一些配置来提高webpack的构建速度。目录缩小范围noParseIgnorePlugin优
日期 2023-06-12 10:48:40
webpack4.0各个击破（3）—— Assets篇
【摘要】 webpack作为前端最火的构建工具，是前端自动化工具链最重要的部分，使用门槛较高。本系列是笔者自己的学习记录，比较基础，希望通过问题 + 解决方式的模式，以前端构建中遇到的具体需求为出发点，学习webpack工具中相应的处理办法。（本篇中的
日期 2023-06-12 10:48:40webpack4.0各个击破（8）—— tapable篇
【摘要】 webpack作为前端最火的构建工具，是前端自动化工具链最重要的部分，使用门槛较高。本系列是笔者自己的学习记录，比较基础，希望通过问题 + 解决方式的模式，以前端构建中遇到的具体需求为出发点，学习webpack工具中相应的处理办法。（本篇中的
日期 2023-06-12 10:48:40史上最走心的Webpack4.0中级教程——配置之外你应该知道事
【摘要】 《webpack4.0各个击破系列》适合不满足于只会配置webpack但一时间又看不懂源码的中级读者。我没法保证这个系列是最好的，但至少能保证每一篇博文都跟那些Ctrl+C和Ctrl+V的博文有本质的区别，不信你读读看。 一.webpack是什么 中文版官方网址：www.webpa
日期 2023-06-12 10:48:40[转] 使用webpack4提升180%编译速度
对于现在的前端项目而言，编译发布几乎是必需操作，有的编译只需要几秒钟，快如闪电，有的却需要10分钟，甚至更多，慢如蜗牛。特别是线上热修复时，分秒必争，响应速度直接影响了用户体验，用户不会有耐心等那么长时间，让你慢慢编译；如果涉及到支付操作，产品损失更是以秒计，每提前哪怕一秒钟发布，在腾讯海量用户面前，都能挽回不小的损失。不仅如此，编译效率的提升，带来的最直观收益就是，开发效率与开发体验双重提升。
日期 2023-06-12 10:48:40
webpack4.0入门以及使用
1. 安装webpack 先新建一个文件夹（demos），然后 npm init -y 新建一个package.json然后在当前目录执行webpack命令 webpack 模块未发现或者未找到src文件，我们新建src文件夹（demos/src） mdkir src 难道我们全局安装的webpack没用吗？ 最新官网出了一
日期 2023-06-12 10:48:40webpack4 中的最新 React全家桶实战使用配置指南！
最新React全家桶实战使用配置指南 这篇文档 是吕小明老师结合以往的项目经验 加上自己本身对react webpack redux理解写下的总结文档，总共耗时一周总结下来的，希望能对读者能够有收获， 我是在这基础多些加工！ 目录 1.版本说明 2.目录结构 3.初始化项目 4.webpack 5.react 6.配置loader(sass,jsx)) 7.引入babel 8.使用HtmlWe
日期 2023-06-12 10:48:40webpack4+vue打包简单入门
前言 最近在研究使用webpack的使用,在查阅了数篇文章后,学习了webpack的基础打包流程. 本来就可以一删了之了,但是觉得未免有点可惜,所以就有了这篇文章,供大家参考. webpack打包的教程具有时效性,有不少作者在一直维护一篇文章.超过一定时间参考价值就会下降,希望各位了解这一点. 使用的依赖一览 "devDependencies": { "clean-webpack-plugin
日期 2023-06-12 10:48:40webpack4+（ES6语法转化、处理JS语法及校验、全局变量引入）
（1）ES6语法解析转换ES5 为了方便测试，我们先将mode模式改为开发模式development，首先编写ES6语法进行相关测试 然后打包测试，发现打包后的js文件仍旧是ES6语法 接下来安装相关依赖 npm i babel-loader @babel/core @babel/preset-env -D 相关依赖的功能作用如下 babel-lo
日期 2023-06-12 10:48:40webpack4+（打包后的文件分析+脚本打包+HTML插件+样式处理CSS+Less+css抽离压缩）
（1）打包后的文件分析 首先将打包后的文件进行适当删减，Ctrl+Shift+L可以同时选中所有相同结构内容 结构如下 (function(modules){ ... })( { ... } ) 分析可知本质为匿名函数即IIFE函数，执行时会传入后面函数执行符里的对象，接下来分析下传入对象 对象构成： key指的是当前模块路径 value指的
日期 2023-06-12 10:48:40