上一篇讲了怎么搭建一个本地服务，这一节我们会从开启本地服务开始讲解。

上上篇在讲Webpack与其它打包工具时，我说了，使用Webpack一定要有模块的概念，Webpack它将所有的文件都当做模块来处理，不管是JS还是CSS及图片资源等，Webpack是如何做到识其为模块的了？那就是从今天开始要说的Loaders。

两个常用样式Loaders的区别：

css-loader和style-loader，二者的作用不同。

css-loader使你能够模块化的在不同文件中引入CSS文件，比如通过require、ES6加入的import、普通的url等。

style-loader则是将计算后的样式加入到页面中（在html中以style的方式嵌入css)，这两个loader组合在一起使用就能够把样式表嵌入webpack打包后的JS文件中。

实例演示：

一、开启本地服务

在终端上走到项目路径下，运行启动命令：

npm run dev

再在浏览器上访问localhost:8088

这个我们的本地服务就打开了。

二、准备工作

使用上篇搭服务器的那个例子，在开发文件夹app下新建一个style目录，存放我们的所有的样式文件，这里只要建一个样式文件app.css。项目结构是这样的：

下面开始在项目目录下安装这两个Loaders，另开个终端界面，刚才那个启动服务的可以不关，运行命令如下命令：

npm install --save-dev style-loader css-loader

如果安装成功了，在package.json文件的devDependencies下就可以看到了。

最后在配置文件webpack.config.js中加入这两个loader的配置项，也就是告诉webpack用哪个loader来解析文件。配置后如下图所示：

到这里准备工作完成了，接下来写代码让这两个Loaders运行起来。

三、写码运行

在刚建的app.css中随便写入一些样式。然后在app目录下webpack的入口文件main.js中引入这个CSS文件。

require('./style/app.css')

这样，样式文件就引入成功了，这时就可以在浏览器中看到效果了，（也可以重新启动一下服务）：

四、验证作用

看到上面这样效果说明样式文件已经引入成功，也就css-loader起作用了，在看一下源码：

样式以style形式嵌入到html文件中，说明style-loader起作用了。

写在最后的总结：

webpack中的所有Loaders，用法都是类同的，只不过有一些Loaders比较复杂，关于复杂的那部分，下篇会单独来说一下。

今天我们学习了css-loader、style-loader的使用，主要是通过一个例子来说明所有Loaders的原理和使用方法，我把这些Loaders归纳为webpack中Loader的简单常用的部分，叫简单锋利的Loaders。

全文若有讲的不对的对方，欢迎留言指正。

短内容，说完整事，哪怕只读一篇也能学知识。点击关注小郑子的头条号，谢谢您的鼓励！