webpack中使用css文件的配置

首先我们知道webpack主要用来处理我们的js代码，以及自动处理js之间的依赖，但是在开发中我们不仅仅有js代码需要处理，还需要加载css、图片，一些高级的将ES6转ES5，typescript转ES5，scss、less转css, .jsx、.vue文件转js等操作，对于webpack本身的能力来说，这些转化是不支持的，它是借助webpack扩展对应的loader实现的。

 

loader使用过程：

1、通过npm安装需要使用的loader

2、在webpack.config.js中的module关键字下进行配置

如下：

 

我们新建一个css文件，但是因为没有在main.js引用它，在使用webpack打包的时候，也不会对它打包处理，也就不会生效，这时我们就需要引用一下：

 

但是打包加载css文件需要对应的loader：

安装css-loader: css-loader主要用来加载css文件，解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码。

npm install --save-dev css-loader

安装style-loader: 将模块的导出作为样式添加到 DOM 中,如果不使用style-loader是不会生效的。

npm install style-loader --save-dev

配置：

 

其中test是正则表达式，用于匹配css文件；

use里面为使用的loader，而且其读取顺序为从右到左。顺序颠倒的话不会生效。

可参考webpack文档loader使用说明。

https://www.webpackjs.com/loaders/style-loader/

 

对于less文件及引用图片也可以使用相应loader进行处理。

图片处理主要有url-loader和file-loader

当图片小于限制大小时使用的是url-loader,会将图片转换成base64编码的字符串。超过限制大小就会使用file-loader，将文件发送到输出文件夹，并返回（相对）URL。