05-尚硅谷-webpack从入门到精通-打包样式资源

奇啊，使用PE去打包样式资源。好，前面呢我们都知道，就pad呢本身啊，它能够去打包这个JS和J，但是呢，不能打包啊，像样式啊，或者是图片的资源。那么好，我们来写段代码来看如何使外派能够打包央视资源。好，在这里我们新建文件夹叫零三啊，打包样式资源。OK，然后呢，我们啊再写写稍微写代码啊。好，同样的新建一个目录SC，好在SC里面新建个文件。好，这是我们的入口文件说了啊，我们要指示WiFi可能以这个文件为入口开始打包。好，然后再新建个文件叫ins啊，我们先新建个ins。好，这里面呢，写稍微写的样式啊，比方说我们写个啊HL啊，比如。对吧，啊，高度呢零啊。

然后呢，Background一个PI对吧，一个非常简单的样式啊呢百分百。OK。样式写好了，我们在JS中负责引入样式资源啊，一定要引入一下。Import。点斜杠应该是点CS，好，这就引入了。好，其他东西呢，我们就不写了啊，因为我们现在主要测试就是它能不能打包样式，那前面当然测试过了啊，好，那么这用如果还是用之前的写法呢，那我们是打包不了的。OK，那么再进行下一步的操作呢？诶，我们得知道就是ipad该怎么去做。哎，前面介绍五个概念的时候呢，我们介绍过一个概念叫做loader啊loader。Load呢，就是能够帮wipa呢解析翻译一些它不能识别的模块，所以这里面我们得写。而logo呢，必须定义我们所谓的配置文件去写，所以这儿呢，我们得定一个配置文件。

啊，注意目录层级呢，是跟SC是位于同一层的。这个。所谓的配置文件的含义是什么意思呢？啊，它的作用就是只是PA。怎么干活，干哪些活？啊，就是干哪些活。就只是派能干哪些活啊，就是当我就如果说具体一点就是当啊，当你运行这个WiFi指定的时候。会加载其中的配置。会加大里面的配置，以里面的配置去干活啊去干活。

好，那么这配置得怎么写呢？诶这里面呢，得用我们的那个common的语法啊。啊，为什么common呢？这里有一句话啊，大家先先记着，就是我们所有的构建工具啊，都是基于node平台去运行的。啊，所以这里面大家一定要安装no啊，当然前面呢，你也得安装啊，都是基于noe平台运行，那么基于平台呢，模块化呢，我们默认采用的是光啊。好，那么这里大家一定要跟之前的e mole区分啊，SC是我们项目的源代码，是写项目的代码。PE是我们写配置的代码，项目和配置是两方面，项目的代码呢，我们是用YES6模块yes model，而配置的模块呢，因为基于no jes平台，所以用的是common，所以这里面呢，其实是我们用了两种模块的方式啊。

那这儿呢，我们得用common common je暴露呢，通过modu.port去暴露，哎，暴露什么呢？暴露一个对象，在对象里面写外配配置。啊，在对象里面写配置啊，就这样的一个状况。好外配置有哪些合理配置呢？诶，我们前面讲过五个核心概念啊，不知道大家还有没有印象，那么在这呢，我们这里写的五个核心配置。分别是entry。对吧，好entry呢，我们叫入口起点是不是。起点只是呢，以哪个文件开始打包的？那么我们这里要指示他以谁开始打包呢？当然是我们的入口文件indexs，所以你这里要做的是要将这个路径呢给完整写上去。入伙气垫啊。啊，这是第一步啊。指数入口起点啊，你还得指示第二个哎，叫做输出对吧？Output你得指示啊，我打包后那输出到哪里去。

这里要注意啊，输出呢是一个对象。它里面呢，有两个属性，分别只是输出的东西，第一个叫file name。只是呢，输出的这个文件名啊，比如说要B。啊，这叫输出文件名。好，还有一个东西呢，首先那叫pass，哎，Pass那叫输出的路径，输出路径。输入到哪去呢？我们得输出到必要的下面，所以呢，我这儿呢，还得新建文件夹加必要的啊。输入到必要的下面好了，那么我们在这写路径的时候呢，通常来讲呢，会写一个绝对路径啊，输出路径，因为避免出错啊，那么绝路径呢，我们会引入no的一个模块，叫做pass。好，所以呢，当然需要有一些基本的知识啊，Pass，通过赋值提取一个方法，专门用来处理径的一个一个方法啊。

所以呢，怎么用呢，用第一个参数杠杠，诶，加上我当前的这个目录就可以了。啊，就OK了。好，这里要解释一下，就是这个杠杆D代表什么含义啊。刚name呢是no的一个变量啊，是个变量。一个量。啊，它代表代表什么呢？当前文件，当前文件指的是目录路径。目录的绝对路径啊，说就是绝对路径啊。那么当前目录决路就是谁呢？诶，我们看啊，这是这个文件，那么目录呢，就是个零三打包样式资源，这个目录就是我这个杠杠DR name的值。好，然后再加一个必要的，加个必要的，诶，那么路径就是必要的了，哎，也就是说待会呢，它输出到哪去呢？输出到这个必要的弄下去啊，就是这个必要的，那输出的文件叫什么名字呢？叫bill.js这个文件啊。

这就是这个输出，它待会做的事，所以要指定两个属性，一个pass，一个file name。好，接下来呢，就有两个东西了啊，一个是Mo啊，指对象里面写规则是数组啊。这里面呢，就是我们所谓的load的配置。在这个里面呢，去写详细的logo配置。就是这个我们的好，当然我现在还没有写啊，我先空着啊，就先写一个大概的一框架给大家看一下。第三个第第四个呢，我们叫插件啊，你看load呢，能帮我们啊去做些翻译，插件呢，能做的事呢，更加强大啊，插件呢大概是plugin。好值呢，为一个数组啊，为一个数组，在数组里面写咱们详细的这个插件的配置啊。好，当然具体怎么配置呢？我们后面来看啊，最后一个叫做模式，对吧，模式，模式呢就两种，开发模式和市场模式，通过mode来制定，比如mode的值为development。

它就是开发模式值为它就生产模式啊，所以这个值有两种啊，或者说production。那这两个值不能同时写啊，所以呢，我们注释掉一个，那么这代表呢，我当时是开发环境，那么如果你想生产环境呢，就把它注释掉，诶把它打开，那么就生产环境啊。那么这以上呢，就完成了我们前面的这五个核心配置，当然这里面呢，没有写太多内容啊，就写了个entry啊，入口是以应该以JS为入口，打包后呢，输出到诶必要的这个。文件名呢，叫bills这个地方去。好呢，里面什么也没写，所以什么也不会做，插件也什么也没写，什么不会做，模式呢，指定的为development模式，开发模式啊开发模式。

好，我们在测试阶段呢，都用开发模式去测试啊，因为生产模式呢，会把代码进行压缩，压缩之后呢，我们就看不太懂这里面有什么内容啊，所以呢，我们以开发模式去测试。那么这呢，我就写完了一个最最基本的配置。哎，当然呢，我们还没有完成我们的需求啊，还记得吗？我们的需求是要将我们的将我们的样式文件进行处理啊，比如CS文件。好，CS文件怎么处理呢？诶，它需要使用一个东西叫做CS啊CS。这东东啊，需要使用它。那么这东西怎么用呢？我们大概在这写一下。所有的配置呢，是个对象，它里面有个属性叫。T的值呢？通常是用正则表达式。这test什么意思呢？代表什么匹配啊，哪些文件？那前文节，那我们要匹配let文节怎么写啊？点CS结尾多了夫啊。

好，这正则的意思呢，就是我的我的后缀名啊，这个文件名啊，是以点CSS键位啊。点C结尾，也就说待会这个这个这个呢，会去这个所有的这个文件啊，所有文件一旦发现这个点CS结尾的这个文件啊，它就会进行处理。对吧，基处理，所以怎么处理呢，通过use处理。意思就是使用哪些loader啊，使用哪些啊。进行处理啊。是哪些，那么咱们处理样式文件得使用这几个就是。是。要使用这两个啊。那么这两个no又代表什么含义呢？它们又起什么作用呢？我们来翻译一下啊，其中CS它做这样的事情。他呢，就是将咱们的CS文件。对吧，啊。啊，以字符串的形式。

变成一个，我们先说变成一个模块啊。加载到JS中。里面内容是啊，怎么是我们的那个样式字范。里面内容是样式串，它会将CS文件呢整合成一个common的某种模块，然后加载到我们的JS中。啊，待会我们来看啊，看能不能看。Style。就是将。JS中的，诶什么呢，将JS中的CS样式。对吧，哎。当然，这里还要说个。然后呢，将中的样式资源插入进去。

然后呢，添加到页面中生效。那具体是had种生效啊。是这样的。这个style的做式就是创建style标签，将我上一步做的这个诶样式啊插入到JS中，然后添加到head这项，那么这是style的做事。所以你会发现呢，他做事就是，诶我匹配啊，我先匹配，诶这个文件是不是样式资源，诶一旦是样式资源很好办，诶我将你这个样式资源里面的内容啊，变成一个common模块加子中诶。那么这里面内容呢，就是你样式里面的所有内容，当然是个字符串的形式啊。然后接着怎么生效呢？我创建一个style标签，诶，再把你这个样式啊添加放进去，然后呢，放到head中，那么这个样式呢，就能生效了。所以总共这样的过程。那么这个过程呢，大家也知道，它显然是先的是CS，所以这也是use这个数组中它的行顺序啊。

执行顺序，我们呢，可以说是从右往前，从右到左。啊，或者说像我现在这样写的就是从下到上啊。啊，依次执行。要执行完第一个，再执行第二个，那么是这样的一个执行关系啊，这样的执行关系。好，发语呢，现在不需要用啊，所以可以折叠起来啊，不需要用，我们现在只需要使用load就能够解析这个样式资源了。好，那么好，那么到底行不行呢？我们来洗漱输入指令验证一下，我们呢，来到零三这个目。那么这里诶，咱们要去测试的时候呢，我们要记得，哎，同样的也需要下载一些我们所要需要用的一些包啊，需要用一些包啊。那么要用的包呢，一共有啊，我们要用we派就得下载我们we派和派干C好，然后这里要用两个loader，一个叫style loader，一个叫CS，那么都得下载。

为了防止啊，将来啊，我每次都重复重复的下载，对吧，所以呢，我们利用上啊，咱们呃，咱们弄的去找包的一个特点，它呢自己目录找不到，它会往上一级目录找，诶那我干脆利用这一点，我就在上一级目录这个代码，这个目录呢去下载所有的包，这样啊我将来呢，就不用重复下载那些包了，这样就快捷方便一些啊。所以呢，我们建议把包下在最外面，我们呢来到最外面CD点点啊回头一层。在这里呢，初始化有个包描述文件N。好名字呢，比如说叫稍等啊。好都OK都OK好，然后呢开始下包，首先呢，继续下载我们的外pad这几个包，派杠CI这两个包啊，这是两个呢，是我们必须要下载的。然后呢，其实我们还下载两个，一个是sal loader，一个是load啊，其实可以一起下的啊，那sal load呢，是因为我这里要用啊，同样的load这里也要用，所以还要下载两个啊，那么这样呢，才能真正把包处理好了，那么它就能找到这两个包，那么找这两包呢，才能使用里面的功能啊，如果你不下载，待会运行呢，就会报错啊报错。

所以呢，我们还得下载一个S和一个S。好，再下载一次啊。啊，都是开发依赖。好了来啊，下完之后呢，我们待会呢就可以运行一下看效果啊，运行看效果好OK好运行的话呢，还是得来到这个零三这个目啊，零三目我们来预习一下NPM来输入PE指令就能运行了。好了，诶，你看到呢，它是没问题，此时呢，你会发现他打包的资源呢，多了一个，诶这样的index资源啊，那么他呢，经过S呢，会变成一个模块，诶以common JS方式整合到我们的JS中。

输出的结果呢，资源呢，有16KB了，我们来看一下啊。好，这些资源都关掉。打开be的啊，看看bills DS，我们往下翻。往下翻一点啊。好，这时候呢，你会发现呢，这里会有个资源叫ins，然后往下往右边走，哎，你会看到啊，这个ins里面的所有内容啊，我们来好好翻一下。呃。那啊，我们这里找错了，哎，是这里。对啊。啊，这个资源呢，是不是在这个下面。嗯，没有，就在就在，呃，在上面的地方啊，在上么地方，哎，在这吧，在这啊。它被整合成一种类似于common方式，整合到我们的样式中，我们来看一下这里面的样式啊。哎，在这就在这。

就在这啊，你看往下走，往右走。哎，这里你看这里就是我们写的样式。对吧，这里就写一样啊，好，就不仔细看了，就是肯定会在我们这里面体现啊，这里面体现。然后关掉它，拆掉它啊，然后呢，我们来，我们最终啊，要看一下这个样式到底能不能生效，对吧，所以我们可以在必要的下面同样的新建一个文件叫。因为我们目前呢，都还没有处理H的资源，现在都得自己手动写，而将来呢，我们会统一的处理啊，所以大家不要担心，现在呢需要麻烦写一写。这里面呢，我们啊就不用写啥了，就直接看效果就好了啊。当然啊，要写上需要把这个JS文件引进来啊，需要把JS文件引进来，OK，引入进来我们看效果。这时候呢，你会发现诶，整个背景色变成了粉红色啊，变成粉红色说明样式生效了，怎么生效呢？我们检查一下element看，打开一下head，这里面呢，多了一个标签叫style标签，标签一展开，诶这里面呢，就是包含了我们前面写的这个样式。

所以说我们前面说了啊，就是这里面有两个loader，诶这里面两个load，其中style呢，就是会建个style标签，将样式插入进在。所以在这里你看到啊，很明显看到head中的多和style标签里面有我们之前写的这个样式，那么这一步呢，就是我们style负责帮我们做的。好了，那么这里面呢，我们就处理好了我们的样式，总体呢，我们来捋一下流程啊。他们首先会通过entry将这个indexs加载进来。那么entry呢，会分析里面的内部依赖图，诶发现呢，我们来打开这个entry啊，发现里面呢，引入那个EXCS资源。所以此时呢，有两个资源，一个是一个是两个资源，好两个资源怎么呢，资源呢，会经过这个里面的进行啊，每一个资源都会进行处理。

好，来啊J发现这个是进不来的，因为CS直接跳。接下来有个应该写CS元，诶，发现这个东西命中了，那么他就会使用下面两个load对这个CS进行处理。而顺序是从下往上的，从右往左的，所以先将我们那个，将我们那个里面资呢，诶这种合到我们这个中来。所以我们去检查这个JS文件，发现里面是有个样式，并且它是以字符串形。然后呢，当你在页面中打开的时候呢，它会创建这个style标签，然后插入到页面中生效啊。大概是这样的过程。然后输出路径呢，就由output来决定的。好，这是整个流程，所以你发现诶，那对于IPA来讲啊，要处理其他资源呢，就是要添加一些相应的诶就能处理了。

这就是的一个处理方式。好，那边有同学可能说了，诶那老师我可能用的是less文件，那less文件它能不能处理呢？诶我们来新建一个文件叫index。好，这里面呢，我们也稍微写一点点样式啊，稍微写一点样式。我们呢给呃，我们呢，比方说啊，我们假设有个元素啊，它叫做啊要。我们呢，将这个元素的这个颜色呢，改成色，改成白色。好，那么我们就写了个这样的样式啊，Less文件呢，后缀名就好了啊，里面呢都可以简单写一写。那么写完之后啊，我们来看啊，我们也把这个文件引进来。Industrial。好了，那么现在能不能打包呢？我们来试一下啊。诶，你会发现他又报错了，他说这个less解析失败。

哎，这是为什么呢？诶这里就要说一下，就是我们说了，我们明确说了，就派呢，只能识别咱们的JS资源，它不能识别样式资源。所以当我们遇到样式资源的时候呢，是要引入这个进行处理。那有同学说了，诶，我这里不是已经配置好了logo，不是处理好了这个样式资源吗。哎，但是这里注意它只检测CS资源。而我的资源呢，是叫less。所以这里面大家需要清楚的一个点就是不同文件配置不同去处理。资源CS资源就得通过处理啊，资的资源呢，也得通过处理啊，假设你将来用，那通过处理。所以呢，我们不能用同一个来去处理这些不同的文件类型是做不掉的。所以怎么办呢？哎，所以我们得再写一个楼的配置。

再写个配置啊。来，我们再大家写一遍啊。哎，也是个正则。路径呢？点less代表它匹配的是less文件结尾。好使用什么呢？他的他用的稍微多一点啊，使用这几个，第一个呢是let's load up。还有第二个呢，叫C。第三个呢是我们的loader，所以它要用三个loader啊，为什么呢，我们来研究一下，为什么要用三个loader啊。其中就是将文件。编译成。CS文件。讲到这儿，大家能不能看懂？你看它的less，将less文件编成CS文件，那我现在就是CS文件了，那CS文件呢，再经过CS的处理呢，会加载到JS中，对吧，最后再经过style的会把JS中的这个样式资源呢，添加到style标签中，插入到head中，是像。

啊，所以呢，他得写三个。那有同学说，诶这两个能不能复用呢？诶不好意思，不能复用每一个这个对象的每一个呢，只能处理一项内容，只能处理一种文件类型啊，所以呢，如果你只用let not，那不好意思，它被编译成CS文件，CS文件它同样不认识，所以这里呢，必须写全啊，必须写全。所以呢，这时候我们再去运行，再去运行派。你会发现呢？啊诶，当然了，我们这里还差一步啊，还差一步就是这个let呢需要下载啊，刚刚忘下了，我们把这个let呢下一下。'。感低啊，当然这这个呢，我们都要下在最外面啊，下在外面，所以呢，我再开一个窗口啊，再开窗口。好，我开两个窗口啊好，这个窗口呢，我们来下我们的那个包叫做。

统一下到最外面啊。这里面呢，千万不要里面下一点，外面下一点，所以呢，大家就要维护这个关系啊，包的统一都在最外面下啊，这里如果你里面下一点，外面下一点呢，那么可能他就找不到了啊，找不到了他只要么找到里面的资源，要么找到外面资源，所以这里下包呢，要特别注意，都要一定要下一块，所以我都在外面下，里面呢负责运行。运行指定就是外派。错，哎，他这里好像报了个错误，我们看一下啊啊诶，他又说cannot find modu less，哎，这里面呢，我们要注意啊，他缺下两个包。Less和less。好，它需要下载个less和less，所以我们再把less再下一遍啊。NP mi，当然呢，我们要调到这个第三个窗口这里，把这个less呢再下一遍。

所以呢，我们有时候是能根据这个错误啊，能够排查到底什么原因的啊，什么原因呢？他这里说了，哎，找不到模块，说明这个模块没有下啊，我们把模块下好就可运行了，好我们来看一下有没有下好呢。好，想好，我们回过头来再接着最后一次运行。好，这时候呢，你会发现诶没有问题了啊，没问题没问题呢，我们可以通过B的下面去检测，看一下有没有我们想要的内容。往下翻。好，这时候呢，你们我们找一找啊，看有没有我们想要的这个文件啊。这里有个CS，这有个JS，诶这里有个less对吧，说明less问题被引进来了，那么它有没有生效呢？我们直接打开页面去生效就可以了啊，我定义个H1标题啊。哈喽。然后呢，我们给个ID属，叫我看个效果，没效就知了。哎，你看颜色变成了白色，诶说明样式生效了啊好，所以到这呢，我们还可以再检查一下这个less文件呢，同样的会建个style标签，诶你看就建了style标签在这儿啊，它已经生效了。

好，上面这个呢，是CS文件的啊，所以这两个都OK都OK。好了，到这里大家能不能清楚我们的诶样式文件的处理呢？回过头来我们来看啊，我们就是在里面写配置，Mole是个对象，里面写Rose是个数组，在这里面呢，写一条条对象。每一个对象呢，就是处理某一种文件类型的一种no的用法。当然啊，你看它通过T去检测文件类型，通过use呢，决定我要使用哪些load对这些文件进行处理啊，每一种文件呢，我们一定要记住要配置不同的load去处理它，诶，才能够处理好啊，处理好。那么这里面呢，哎，我们处理我们大家处理的CS文件和less文件。将来呢，如果你要处理SAS文件，文件呢，同样的诶去改，哎，只不过呢，Less换成S，哎或者是S等等。

好了，那么我们呢，处理这个样式文件就到这，那么大家呢，接下来呢，可以自己尝试一下。