webpack学习之webpack解析样式
之前提到的插件是为了实现某些功能的,而加载器则是用来解析各种文件的。
通常加载器都是配置在rules下的
1、解析css文件
webpack只识别js文件,所以遇到css文件时,需要借助一些加载器。解析加载css文件需要两个loader:style-loader、css-loader
module: {
rules: [ // 存放各种loader:使用loader的顺序是:从下往上
{
test: /\.css$/, // 匹配哪些文件(后缀是.css的文件)
// 加载css文件至少需要 css-loader、style-loader两个加载器
// 先用css-laoder加载css文件,再用style-loader加载到页面上
use: ['style-loader','css-loader'] // 使用什么加载器
/* use的值:
* 1、直接写字符串:适用于只需要一个laoder
* 2、数组:多个loader:加载的顺序是:从右往左
* 3、对象:需要单独配置属性值
*/
},
]
}
2、解析less文件
解析less文件是先将less编程成css,之后再按照解析css文件处理。
将less编程成css需要用到:less-loader
{
test: /\.less$/,
// less首先编译成css,之后就按照加载css文件处理
use: ['style-loader','css-loader','less-loader'],
exclude: /node-modules/, // 不会去加载node-modules中的less文件
}
3、处理css兼容性问题
在写CSS3属性的时候,需要针对不同的浏览器加上不同的前缀才会被浏览器识别。想要兼容不同的浏览器,需要用到:postcss-loader
{
test: /\.css$/, // 匹配哪些文件(后缀是.css的文件)
use: ['style-loader','css-loader', 'postcss-loader'] // 使用什么加载器
}
!注意:使用postcss-loader时,还需要配置两个文件:postcss.config.js 和 .browserslistrc
postcss.config.js 文件配置如下
.browserslistrc 文件中只有一句: cover 99.9%
// postcss.config.js配置
module.exports = {
plugins: [
require('autoprefixer'), // 需要安装 autoprefixer 插件
]
}
// 使用 postcss-loader 是直接在 css-loader 后面添加
{
test: /\.css$/, // 匹配所有css文件
// 对于css3属性处理兼容:postcss-loader
use: ['style-loader', 'css-loader', 'postcss-loader'], // 使用 style-loader 是通过js生成style标签加载到页面中的
},
4、处理css中引入less问题
在真实项目中不可避免会有在css文件中引入less文件的写法,如果只单独处理整个css文件,不处理css文件中的less,webpack会直接把less当做css来处理,所以会报错。
解决办法:对解析css的加载器进行一些额外的配置
{
test: /\.css$/, // 匹配哪些文件(后缀是.css的文件)
use:['style-loader', {
loader:'css-loader',
options: {
importLoaders: 1 // 先去使用后面的1个加载器去加载
}
}, 'less-loader']
// 实践发现下面这种写法效果跟它是一样的
// use: ['style-loader','css-loader','less-loader']
}
5、合并css文件
通过上面的各种加载器处理css/less文件,最后都是内嵌式,而且每加载一个样式文件,打包生成的html中就多一个style标签
想要将css文件合并成一个,通过外链式引用的,需要用到插件: mini-css-extract-plugin ,用插件中的 loader 取代 style-loader
// 在配置文件中引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 去plugins配置合并后的css文件信息
new MiniCssExtractPlugin({
filename: 'css/[name].[hash:5].css', // 合并后的css文件名
// chunkFilename: 'css/[id].[hash:5].css'
}),
// 去rules中使用并配置
{
test: /\.less$/,
// less首先编译成css,之后就按照加载css文件处理
use: [{
loader: MiniCssExtractPlugin.loader, // 这里不再使用 style-loader
options: {
esModule: true, // 支持通过esModule导入的样式
}},
'css-loader','postcss-loader','less-loader'],
exclude: /node-modules/, // 不会去加载node-modules中的less文件
}
!注意:这里只会把使用了 MiniCssExtractPlugin.loader 的样式文件合并成一个之后通过link外链样式引入到页面,而没有使用该加载器的样式还是通过style内嵌样式引入到页面内。