分类：WebPack

2022
05-17

webpack实现静态资源缓存的方法

目录引言区分一下几种不同的hashhashchunkhashcontenthash实现js缓存CommonsChunkPlugin不正确用法引起问题的原因实现css的缓存实现图片/字体的缓存参考引言静态资源缓存是前端性能优化的一个点，所以在前端开发过程中，一般会最大限度的利用缓存（这里主要是强缓存）。回到本文主题，在使用webpack构建的项目中，稍有不慎的话，即使服务器设置了缓存策略，可能构建的项目无法实现静态资源缓存。那么webpack怎样才能达到使用缓存的... 继续阅读 >

2021
11-09

webpack的移动端适配方案小结

目录remvw适配第三方UI框架结语在移动端开发的过程中，一个最常见的问题就是适配不同的屏幕宽度。目前比较常见的适配方案有rem和vw，它们都是css中的相对单位。remW3C对rem的定义是font-sizeoftherootelement，它是一个只相对于浏览器的根元素（HTML元素）的font-size的来确定的单位，也就是说对于不同宽度的机型，我们只需要计算出对应的根元素的字体大小，用同样的css代码可以实现等比适配。考虑最简单的情况：html代码片段... 继续阅读 >

2021
10-12

webpack几种手动实现HMR的方式

目录1.前言2.GitHub3.基本配置项目目录package.jsonwebpack.config.jsmain.jsindex.htmlmain.vue4.webpack-dev-serverpackage.jsondev.config.js完成5.webpack-dev-middleware+webpack-hot-middlewarepackage.jsondev.config.js完成1.前言众所周知，在webpack中使用模块热替换(HMR)，能够使得应用在运行时，无需开发者重新npmrundev、刷新页面，便能更新更改的模块，并且将效果及时展示出来，这无疑极大的改善了前端同学们的生... 继续阅读 >

2021
09-20

Webpack中publicPath使用详解

目录outputoutput.pathoutput.publicPathwebpack-dev-server中的publicPathhtml-webpack-plugintemplatefilename最后斜杠/的含义参考最近自己在搭建一个基于webpack的react项目，遇到关于output.publicPath和webpack-dev-server中publicPath的问题，而官方文档对它们的描述也不是很清楚，所以自己研究了下并写下本文记录。outputoutput选项指定webpack输出的位置，其中比较重要的也是经常用到的有path和publicPathoutput.path默认... 继续阅读 >

2021
09-14

如何在webpack项目中调试loader插件

最近，在学习webpack使用时，发现webpack-replace-loader配置正则不起用，调试插件后才发现，search健值竟然不支持正则的写法，后有换成string-replace-loader插件，这个loader的search健值支持正则写法，问题得到解决。这里记录下loader的调试方法：首先需要准备node环境第一步：下载全局安装node-nightlynpminstall-g--save-devnode-nightly第二步：添加调试命令"node-nightly":"node-nightly--inspect-brk./node_modu... 继续阅读 >

2021
07-09

80行代码写一个Webpack插件并发布到npm

1.前言最近在学习Webpack相关的原理，以前只知道Webpack的配置方法，但并不知道其内部流程，经过一轮的学习，感觉获益良多，为了巩固学习的内容，我决定尝试自己动手写一个插件。这个插件实现的功能比较简单：默认清除js代码中的console.log的打印输出；可通过传入配置，实现移除console的其它方法，如console.warn、console.error等；2.Webpack的构建流程以及plugin的原理2.1Webpack构建流程Webpack... 继续阅读 >

2021
03-23

分享12个Webpack中常用的Loader(小结)

前言初衷：整理一些常用的loader分享给大家，方便知道在什么场景下该用什么loader。如果有大佬都懂悄悄左滑就行，不喜勿喷。适合人群：前端初级开发。style-loader用途：用于将css编译完成的样式，挂载到页面style标签上。需要注意loader执行顺序，style-loader放到第一位，因为loader都是从下往上执行，最后全部编译完成挂载到style上安装cnpmistyle-loader-D配置webpack.config.jsmodule.exports={module:{rules:[... 继续阅读 >

2021
03-16

使用Webpack构建多页面程序的实现步骤

使用webpack搭建单页面程序十分常见，但在实际开发中我们可能还会有开发多页面程序的需求，因此我研究了一下如何使用webpack搭建多页面程序。原理将每个页面所在的文件夹都看作是一个单独的单页面程序目录，配置多个entry以及html-webpack-plugin即可实现多页面打包。下面为本项目目录结构.├─src│└─pages│├─about││├─index.css││├─index.html││└─index.js│└─index│... 继续阅读 >

2021
03-07

50行代码实现Webpack组件使用次数统计

背景最近有个领导想让我们搭组件库，然后我就想知道目前项目中使用的三方组件库哪些组件使用频率最高。本来想去咨询小伙伴，但是小伙伴太忙了，只能自己弄了。我就想能不能通过webpack来实现我的想法效果我们是用的@material-ui，下面是组件使用情况实现我们知道loader的source是文件的静态字符串如下图最快的方案通过字符串统计用正则的方式一把梭，但是这样会有问题就是如果注释部分有的话也会被统计进去就不准确，所以我... 继续阅读 >

2021
02-26

使用webpack和rollup打包组件库的方法

前言之前做了一个loading的样式组件，为了实现代码的可重用性，将这个小项目打包并且发布在了npm上。在一次次的打包发包过程中经历了一个有一个报错，@buzuosheng/loading这个组件已经到了2.7.0版本，虽然还有一些要调整的地方，但总算是可以用了。webpack和rollup对比webpack算是使用程序员使用最多的打包工具，面试中往往会问到webpack的相关问题，而rollup被问到的要少很多。导致这种现象的一个原因是，应用开发使用webpack，库... 继续阅读 >

2020
12-02

WebPack工具运行原理及入门教程

WebPack是什么一个打包工具一个模块加载工具各种资源都可以当成模块来处理网站http://webpack.github.io/如今，越来越多的JavaScript代码被使用在页面上，我们添加很多的内容在浏览器里。如何去很好的组织这些代码，成为了一个必须要解决的难题。对于模块的组织，通常有如下几种方法：通过书写在不同文件中，使用script标签进行加载CommonJS进行加载（NodeJS就使用这种方式）AMD进行加载（require.js使用这种方式... 继续阅读 >

2020
11-16

基于Vue+Webpack拆分路由文件实现管理

事实是，如果你的项目不是特别大，一般是用不着分拆的。如果项目大了，那就需要考虑分拆路由了。其实，这个操作并不复杂。当我们用vue-cli工具，创建一个新的vue项目时，就已经给大家新建好了一个路由文件src/router/index.js，内容如下：importVuefrom'vue'importRouterfrom'vue-router'importHelloWorldfrom'@/components/HelloWorld'Vue.use(Router)exportdefaultnewRouter({routes:[{path:'/',na... 继续阅读 >

2020
11-10

Webpack的Loader和Plugin的区别

Loader用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或者将内联图像转换为dataURL。比如说：CSS-Loader，Style-Loader等。loader的使用很简单：在webpack.config.js中指定loader。module.rules可以指定多个loader，对项目中的各个loader有个全局概览。loader是运行在NodeJS中，可以用options对象进行配置。plu... 继续阅读 >

2020
11-10

解决vue init webpack 下载依赖卡住不动的问题

有时候下载依赖的时候网速不行，这时候我们选择手动下载依赖有时候下载依赖的时候网速不行，这时候我们选择手动下载依赖：选择No,Iwillhandlethatmyself生成完项目之后，再cd进入项目文件夹，然后再npminstall安装即可。但是如果真的安装“个把”小时也没成功那就用：cnpminstall吧如果安装过程中等待太久，我们难免会不耐烦，所以会中途关闭项目。那么我们接下操作npmrundev肯定是报错的正确做法：cd进入项目文件夹... 继续阅读 >

2020
10-18

如何编写一个 Webpack Loader的实现

前言在平时自己由零搭建项目时，虽然基础配置都比较熟悉，比如配置file-loader,url-loader,css-loader等，配置不难，但究竟是怎么起作用的呢，今天就来说说如何编写一个WebpackLoader。Loader作用按我自己的简单理解，loader通常指打包的方案，即按什么方式来处理打包，打包的时候它可以拿到模块源代码，经过特定loader的转换后返回新的结果。比如sass-loader可以把SCSS代码转换成CSS代码编写Loader保持功能单一... 继续阅读 >

2020
10-16

详解webpack的clean-webpack-plugin插件报错

1、出错代码constpath=require('path')constCleanWebpackPlugin=require('clean-webpack-plugin')//const{CleanWebpackPlugin}=require('clean-webpack-plugin')module.exports={entry:'./input.js',output:{path:path.resolve(__dirname,'dist'),filename:'output.bundle.js'},mode:'development',plugins:[newCleanWebpackPlugin()],module:{rules:[{test:/\.(png|jpg|gif)$/i,... 继续阅读 >