jieyucx的博客

Webpack所有的插件都需要在webpack.config.js的plugins节点中配置。插件的作用很多，以下是插件常见的。

index.js// 异步loader const callback = this . async();// 使用babel对代码进行编译 babel . transform(content , options , function(err , result) {});，用于编译ES6+代码为ES5。，只能预设。module : {现在，我们已经完成自定义loader的创建和使用，它可以将ES6+代码编译成ES5代码。文件是为了。

上面我们是借助babel插件实现的清除console,那么经过前面章节的铺垫，我们了解了loader的本质、执行顺序、以及分类还有常用的api，我们是否可以自己尝试写一个类似功能的loader呢？下面我们就一起来实现一下吧其实很简单就用正则匹配替换一下就行了，哈哈哈// 清除文件内容中console.log(xxx) return content . replace(/ console\.log\(.*\);?/ g , "");配置使用module : {这样就可以啦main.js。

同步loader是最常用的loader，当webpack需要处理一个文件时，同步loader会对其进行同步处理，并且返回一个处理后的模块（一个JavaScript模块或是其他类型的模块）。在使用异步Loader时，需要注意异步Loader和同步Loader的执行顺序，以确保Loader能够正确处理模块。该配置中，Webpack先执行sync-loader，然后执行async-loader，这意味着，sync-loader可以对模块进行预处理，然后将它传递给async-loader进行进一步处理。

可以看到日志中有loader处理js文件时的输出日志，代表我们的第一loader就创建成功啦，虽然这个loader只是个过客，并没有对我们的js文件做任何处理，哈哈哈。但是通过这个例子，我们可以清晰的认识到loader的工作原理和运行方式，这为后面我们写比较复杂的 loader做了铺垫。至此基于webpack的一个简单的项目开发环境就搭建完成啦。

Webpack中的loader是用于处理一些非JavaScript`文件的代码转换器，例如将ES6/ES7转换成ES5将SCSS/Sass/less转换成CSS。loader可以让webpack支持更多的文件类型，并且也可以通过loader将一些资源打包成JS文件中。loader是针对module级别的，即针对每个待打包的文件进行转换处理，并最终输出打包后的文件。在文件中配置loader，可以指定不同的文件类型使用不同的loader进行处理，也可以通过链式调用多个loader完成某种特定的处理。

在 webpack.config.js 文件中使用了 SplitChunksPlugin 插件对代码进行了分割，其中包括了对 Vue、Element-UI 等第三方库的分割，可以提高页面加载速度。在 webpack.config.js 文件中使用了 VueLoaderPlugin，这是用于 Vue-loader 的插件，它会在开发环境下编译 Vue 单文件组件。这里使用 vue-loader 处理 .vue 文件，开启缓存加快构建速度。在生产环境中使用了优化插件，包括压缩 CSS、JS 和图片等资源文件。

1. 定义生产环境变量// 获取cross-env定义的环境变量 const isProduction = process . env . NODE_ENV === "production";2. 借助CopyPlugin ,将public目录下的文件拷贝到dist目录下// 将public目录下的文件拷贝到dist目录下 patterns : [ {// 忽略index.html文件 ignore : [ "**/index.html" ] , } , } , ] , }) , ]

PWA（Progressive Web Apps）是一种可以将网站转变为类似于本地应用程序的技术，具有响应速度快、离线使用等优点。它采用渐进增强式开发技术，在不同浏览器中有不同程度的支持，可以实现许多类似于应用程序的特性，如推送通知、离线缓存、加速加载等。

core-js是一个JavaScript库，提供了许多ES5、ES6和其他新特性的polyfills，以确保这些新特性在旧浏览器上的兼容性。polyfill翻译过来叫做垫片/补丁。就是用社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上，使用该新特性。它的主要用途是为了确保Web应用程序在所有浏览器中都能运行，并提高代码的可移植性和可维护性。举个例子，ES6引入了一个新的数据结构Map，但是在某些旧版本的浏览器中可能不支持Map。在这种情况下，使用core-js库的可以确保Map。

Preload和Prefetch是两种优化前端性能的技术，它们可以让浏览器在某些条件下提前加载一些资源，从而加快应用程序的加载速度。Preload指的是在页面加载时预加载一些关键资源，这些资源在接下来的页面操作中会立即用到。Preload可以使用属性来实现，比如：其中，href表示需要预加载的资源路径as属性指定预加载资源的类型相比之下，Prefetch是在页面加载后不紧急需要但将来可能需要使用的资源进行预加载。Prefetch的实现方式是通过添加属性来实现，例如：这里。

Webpack的code split是一种技术，它能够将代码分割成多个块，从而优化应用程序的性能。这样做可以实现按需加载和并行加载，从而减少初始化时间和请求次数。Code split在Webpack中通过使用entry语法和各种Loader和插件来实现，可以将代码分割成多个文件，然后在需要时加载它们。它可以适用于任何类型和大小的应用程序，尤其适合大型单页应用和跨页面共享代码的应用程序。

是一个用于优化和压缩图片的Webpack插件。它使用多个优化器和压缩器来减小图片文件的大小，包括和gifsicle等库。该插件可以帮助我们在构建应用程序或网站时减少图片文件大小，从而提高网站的性能和速度。在使用Image-minimizer-webpack-plugin之后，我们可以减少页面加载时间，提高用户体验。除了压缩图片之外，该插件还提供了其他一些功能，如支持WebP格式，并支持使用不同的压缩选项来优化图片。

在Tree shaking过程中，Webpack会自动分析项目中每个模块的引用关系，只有被引用过的模块和代码块才会被打包到输出文件中，未被引用的模块和代码块则会被删除，以减少输出文件大小。这样就可以标记和删除没有使用过的代码，从而减小打包后文件的体积，提升网站性能。，因为ES6模块化中的代码引用关系是明确的静态分析关系，使得Webpack能够方便地判断哪些代码需要被打包。babel会对ES6及以上的代码进行转译成ES5的代码，而ES5的代码存在一些冗余的部分，也就是所谓的辅助代码。因此会增加代码的体积。

Webpack的多进程打包是通过利用多个子进程同时处理不同的模块来加速打包过程的技术。这种技术可以提高打包效率，减少等待时间，使得项目构建更快。使用多进程打包的好处在于，它可以将一些比较耗时的操作分配到不同的进程中进行并行处理，从而提高打包效率。这使得打包过程更加高效，节省了时间和资源。另外，和单进程打包相比，多进程打包也有助于避免进程卡死或异常终止的问题。对于大型项目或需要进行复杂操作的项目，采用多进程打包可以更快地完成项目构建，提高效率，减少等待时间，使开发人员可以更快地检验代码。

Webpack的缓存通常是指模块缓存和构建缓存。1. 模块缓存通过缓存模块的内容，可以避免重复读取和解析同一个模块的开销。Webpack默认是开启模块缓存的，即第一次编译时会将已经加载的模块信息缓存到内存中，下一次编译时会直接使用缓存中的模块信息，而不是重新解析模块。2. 构建缓存Webpack会对每次构建的结果进行Hash值的计算，如果两次构建的Hash值相同，则表示构建结果一致，Webpack就会将构建结果缓存下来。当下一次构建时，如果发现输入文件没有发生改变，则会直接使用之前的缓存。

文件进行压缩、代码分割等操作，但是对于图片、字体等静态资源，可能只需要将其复制到打包目录即可。这里配置了三组loader和配置项，分别用于处理JS文件、图片、其他静态资源。但是在实际应用中，不同类型的文件可能需要不同的处理方式，比如当我们处理。配置是用于对不同类型的文件进行不同的处理方式的配置项。和配置项，当文件匹配对应的规则时，就会按照这组。和配置项来进行处理，而不会继续往后匹配其他的。来对不同类型的文件进行处理，例如通过。这可以节省打包时间，提高打包效率。

（简称HMR）是Webpack提供的一个功能，它可以在不刷新页面的情况下，实现局部模块的热更新。也就是说，当你修改了一个模块的代码后，HMR会自动将修改的部分更新到浏览器中，而不会重新加载整个页面。HMR的实现原理是通过WebSocket连接服务器，实时监听文件变化，然后动态更新模块。对于一些纯数据的模块，Webpack会使用热替换技术，替换旧模块。使用HMR可以提高开发效率和调试体验。在开发过程中，只需修改特定的代码，即可实时保存并查看修改结果，无需手动刷新浏览器。同时，HMR。

开发中我们不可避免的会写一些bug出来，这时候要调试，快速定位到bug到底出现在哪尤为关键。例如我故意在sum函数中写一个错误代码如下：这时我们用前面章节已经写好的开发模式的webpack.dev.js运行，控制台会出现如图提示：我们点击它报错的文件行数点进去看看它给出的错误提示的文件是编译后的代码文件，我这里是这个例子比较简单，还是可以一眼看出啦问题在哪，可是实际开发中肯定比这复杂的多，如果想通过编译后的文件定位问题，肯定要废一番功夫。

兼容性在以前一直是个比较令大家头疼的事情，尤其是那时候还得兼容IE，webpack肯定是考虑到了这些，实现样式兼容性，我们需要借助几个loader。这就是本章的内容拉，webpack处理css文件打包到单独的文件、压缩、以及兼容性处理。在以前的章节中，我们配置过的生产环境的打包文件，webpack.prod.js。我们去控制台将往速调慢，然后运行打包好的index.html文件。用法很简单，引入，然后在plugin配置对象中添加就可以了。如图，css文件已经被处理成了单独的文件了。文件加载时，会创建一个。

生成模式（production mode）是指在开发完成后将代码部署到生产环境中运行的模式，通常需要进行代码压缩、优化、合并，以减少文件大小和请求次数，提高页面加载速度和运行效率。开发模式（development mode）则是指在开发过程中使用的模式，通常需要对代码进行调试、热更新等操作，以提高开发效率和代码质量。在开发模式下，通常不需要进行代码优化和压缩，可以保留源代码的完整性，以便于调试和排查问题。

是一个基于Node.js构建的Web服务器，它可以在本地开发环境中启动一个实时的Web服务器，并且能够自动编译并且刷新浏览器，为前端开发提供了很大的便利。支持热模块替换（HMR），即在应用程序运行中更新模块而无需刷新整个页面，它还提供了一些其它的特性包括压缩、编译、转换、代码分离等等。通常用来搭建本地开发环境，而部署时则需要使用其它的Web服务器。

是一个webpack插件，用于生成HTML文件，并自动注入生成的打包文件。它可以根据指定的模板生成HTML文件，并自动引入本次打包后的JS和CSS文件。此外，它还可以生成带有哈希值的文件名以避免缓存问题。可以方便地将webpack与HTML文件的生成和管理进行集成。

Babel是一个编译工具**，主要用于在旧浏览器或过时的JavaScript语言版本中转换新的或标准的JavaScript语法和功能。它的主要作用是解决跨浏览器的兼容性问题，让我们能够使用最新的JavaScript特性，而不必担心它们不被支持的浏览器无法使用。具体来说，Babel可以将ES6及以上的代码转换为ES5或更低版本的代码，使得这些新特性也能在较旧的浏览器上运行。同时，Babel也支持一些插件，如TypeScriptFlowReact等，它们可以帮助我们更加高效、舒适地使用这些语言或框架。

要在webpack中使用Eslint首先我们先了解下什么是EslintESLint是一个用于在JavaScript代码中发现和报告问题的静态代码分析工具。它可以检测常见的编码错误，如拼写错误、变量未声明、使用未定义的变量等，还可以检测代码格式问题，如缩进、空格、括号使用等。// 继承 Eslint 规则 extends : [ "eslint:recommended" ] , env : {

这里我们就以font class 方式在我们的项目中使用一下，将iconfont.css文件引入到项目中的css文件夹下，然后我们去public/index.html下使用一下字体图标。这里有三个选项，根据需求随便选择，我这里演示一下添加到项目。将iconfonts.css引入到main.js中。将这三个字体图标文件引入到fonts目录下。到这里其实你可以不做任何配置，直接执行。修改iconfonts.css的引入。点击确定以后会直接跳转到项目目录。成功使用了子图图标。

如图，在前面的章节我们打包后的文件默认都输出到了dist目录下，无论是图片、还是js都在同一级别目录，这里目前处理的资源比较少，如果资源一多，所有的资源都在同一级目录，看起来很费劲。那么这节就介绍一下如何将打包的资源输出到指定的目录，例如，图片资源输出到下，js文件输出到dist/js下。

到这里可能有的小伙伴就要问了，为什么要只将小于10k的图片资源处理成base64呢，base64格式的图片有什么特点呢？这时可以看到dist目录下只有一张图片了，另一张被处理成了base64,以 data URI 形式内置到 js 中了。到 Webpack 里了，我们只需要简单配置即可处理图片资源。,我们添加配置之后，应该会将其转换成base64.可以看到效果还是和上次没处理base64之前一样的。在webpack5以前，我们处理图片资源通过。将小于10k的图片资源，处理成base64格式。

本身是不能识别样式资源的，所以我们需要借助Loader来帮助解析样式资源。

在上一节中我们在安装完webpack 和 webpack-cli依赖之后，直接通过的方式对src下的js文件进行了打包。其中的: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。--mode=xxx：指定模式（环境）。就是webpack的打包入口文件，是指定打包的模式，这些东西其实我们可以在webpack.config.js中配置，配置好了之后，我们只需要执行就能打包了，不用那么长的命令。

Webpack是一个现代的 JavaScript 应用程序静态模块打包器它是一个开源的前端工具，可以将各种资源文件（JS、CSS、图片、字体等）打包成一个或多个包，并且能够通过配置选项来实现各种构建需求。当你的应用程序逐渐变大，代码量变得越来越多，你就需要使用模块来组织代码。然而，模块化使用的代码需要打包成一个或多个文件以便浏览器可以使用。这是 Webpack 出现的初衷，它的主要作用是将各种模块打包成浏览器可以识别的代码。Webpack 还提供了各种插件和加载器，让你可以根据需要灵活配置打包过程。