0 准备

上一次我们讲到如何使用webpack进行一个简单的打包，那么这一次我们学习一下如何使用webpack来打包样式。

首先我们新建一个文件夹，在这个文件夹中建立一个src文件夹和一个build文件夹。

    1 新建入口

在src中我们新建一个index.js文件，由于我们webpack需要一个入口开始打包。那么我们创建一个入口打包

index.js:

‍

‍

由于这一次我们只是演示如何打包样式，所以我们js中只需要导入样式资源就可以。之后，我们再创建一个index.css文件

index.css:

    2 webpack的配置文件

由于我们webpack是只识别json和js文件的。因此当他需要处理其他类型的文件的时候，就需要使用loader。为了让webpack能够加载loader，我们需要开始编写一个webpack的配置文件。

        2.1 webpack.config.js

我们新建一个webpakc.config.js文件，这里要注意的是webpack.config.js文件一定要和src平级，也就是说不能在src中建立我们的webpack.config.js，这里要注意。

那么这个webpack配置文件会被webpack自动寻找到并且被使用，所以只要我们确保创建的目录正确就可以了。

接下来我们就要开始编写webpack.config.js了，那么我们webpack.config.js的语法是CommonJS语法。所以如果我们想要暴露一个对象那么就是：

我们第一章的时候说过webpack有五个核心概念: entry,output,loader,plugins,mode。

那么我们在这个配置文件中就要告诉webpack怎么处理这5个部分

        2.1.1 entry

我们要告诉webpack，我们打包文件的入口在什么地方，因此我们要在我们的配置文件中指示出我们的打包入口：

        2.1.2 output

有了输入就一定有输出，所以接下来我们需要告诉webpack他的出口，也就是打包文件要输出到什么地方去。在这个地方需要记住两个参数，一个是filename，一个是path。filename是用来指明你要输出的文件的名称。path就是用来指示文件的路径。

对于这个path，我们一般都是要给绝对路径，那么绝对路径怎么拿到呢？我们就需要借助其他的模块来做这件事了。

这个地方我们我们需要引入path模块的resolve方法。

通过这个方法我们就可以提取我们的绝对路径了。

__dirname得到的路径，就是我们这个webpack.config.js目前所在这个目录的绝对路径。

        2.1.3 module

这个module就是我们所说的loader，在这个部分中，我们就可以让webpack加载其他的工具来帮助webpack进行打包。

module中，我们可以加载很多工具来进行不同类型的文件处理，那么这个时候我们就要告诉webpack对于css文件，你要怎么处理，对于less文件你要怎么处理。如何做到呢？我们可以通过文件的类型进行匹配，如果这个文件是css结尾的，那么我们就扔给处理css的工具。如果是less结尾的，我们就扔给处理less的工具。那么怎么去写这样的配置呢？

module的框架写法如下：

这个rules就是用来写匹配的部分了，那么我们先配置如何处理css文件,写法如下：

test关键字是用来匹配的，这个里面所写的就是正则表达式了。css文件的结尾都是.css，所以我们可以通过这个方式来匹配css文件。

use是用来指示用什么loader来处理。我们找到css文件之后，就要交给对应的loader来处理。css文件需要两个loader，一个是style-loader，一个是css-loader。

css-loader是用来解析css文件的，解析完之后生成一段字符串。为了能让这个字符串生效，我们需要把他们插入到style的标签中，这个时候就是我们style-loader发挥自己功能的时候了。style-loader会先在生成一个style标签，然后把生成的css插入到标签里面。

这里需要注意的是webpack的解析顺序是从右到左，那么根据我们解析的顺序，css肯定更要在style-loader之前，所以一定要按照这个顺序来写哟！！！