2.Webpack的loaders（一）

一、css-loader

 

 打包会报错：

 

 安装css-loader：

 

 虽然现在安装了css-loader，但是打包还是不会成功，因为我没有告诉webpack这个loader是干啥的，我要告诉webpack加载css文件要

使用哪些loader：

在webpack.config.js中进行如下配置：

 

 现在再打包就不会报错了，但是还是没有样式。因为css-loader只是负责将.css文件进行解析，并不会将解析之后的css插入到页面中。

二、style-loader

将css插入到页面中，需要使用style-loader。

 

 

 

 现在再打包样式就生效了：

 

 style-loader其实就是在head中创建一个style标签，将css样式塞入到style标签中。

三、less-loader

 

 现在对文件打包，发现也会报错：

 

 

 

 less-loader就是利用lessc这个工具将less转换为css。

在webpack.config.js中进行配置：

现在就成功啦！

四、PostCSS

PostCSS是一个通过js来转换样式的工具，这个工具可以帮助进行一些css的转换和适配，比如自动添加浏览器前缀、css样式的重置。

但实现这些功能，需要借助于PostCSS对应的插件。

使用：①查找PostCSS在构建工具中的扩展，比如webpack中的postcss-loader（在webpack中使用postcss就是使用postcss-loader来处理的）；

②添加PostCSS相关的插件。

 

因为postcss需要有对应的插件才会起作用，所以我们需要配置它的plugin。 

 

 但会发现报错了：

 

 这是因为我没有安装对应的添加前缀的插件：

 

 现在再打包就没问题了：

 

抽取PostCSS配置信息

也可以把这些配置信息抽取出去：

 

 

 

 会先去webpack.config.js中读取有没有配置信息，如果没有的话会去当前项目的对找postcss.config.js中看看有没有导出对象，如果有

导出对象，就会把导出对象当做配置信息。

不过使用更多的是postcss-preset-env插件，它可以帮助我们将一些现代的css特性转成大多数浏览器认识的css，并且会根据目标浏览器

或运行时环境添加所需的polyfill，也包括会自动帮组我们添加autoprefixer。

安装:

配置：

 

 这样打包也是没有问题的。