weixin_40285008的博客

前言：如果我们不对webpack做配置，那么一旦代码有报错，浏览器控制台提示的错误就会定位到webpack打包之后的js文件中，我们都知道打包后的js是经过压缩过的，我们从这个js文件中无法找到报错代码行的源文件，我们想知道的一定是报错的代码是哪一个源文件中的哪一行，sourceMap的作用简单说就是帮助我们在源文件和打包后的文件之间做一个映射，帮我们找到报错代码的源文件以及具体到源文件的哪一行代码，这样就帮助我们提高了调试效率。source-map广义上讲就是webpack对于代码调试的的所有配置的集合

本篇文章给大家介绍两个比较简单的webpack的配置项：entry和outputentry:入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。(webpack官网)如果没有配置output，那么默认的出口文件名就是main.jsoutput:指的是打包输出，output 属性告诉 webpack 在哪里输出它所创建的 bun

前言：在之前的文章中，给大家讲了webpack中很重要的一大模块之loader的概念以及如何使用loader处理不同类型文件的打包，本篇文章给大家介绍一个与loader并驾齐驱的webpack中的另一大模块之plugins，通过plugins，我们不但可以提高打包效率，也可以优化性能。下面接正文：我们还是以之前的demo项目为例子，首先给大家讲一下plugins是用来干嘛的：上图所示是我们当前demo项目的项目结构，dist文件夹是打包后的输出文件夹，里面现在包括一个bundle.js（打包后输出的j