乞丐版webpack想认识css需要css-loader。
主要用于加载css文件,例如在main.js中引入css文件,没有css-loader的webpack是不认识的。
原理是转换成commonjs对象,本质是js,里面内容是样式字符串。
同时还需要style-loader,因为打包后的css一般都会放在页面的style标签插入到head中,webpack需要能够去读懂style标签。
npm i style-loader css-loader -D
然后在webpack中设置module:
module.exports = {
module: {
rules: [
{
test: /.css$/,
use: [
'style-loader', // 这个要在写在第一个,因为loader读取顺序是倒序的,而且会把结果传递给下一个loader去做处理
'css-loader'
]
}
]
}
}
预处理器的话,就多添加相关loader即可,例如less-loader用于将less转换成css。
npm i less less-loader -D
module.exports = {
module: {
rules: [
{
test: /.css$/,
use: [
'style-loader',
'css-loader',
]
},
{
test: /.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
}
}
css文件最终打包后生成的资源是集成在js文件中的,如果把css单独打包成一个css文件会带来什么好处。
这里引用下掘金的一片文章【面试官:生产环境构建时为什么要提取css文件?】
文章讲了一些优点:
更好的缓存,当 CSS 和 JS 分开时,浏览器可以缓存 CSS 文件并重复使用,而不必重新加载,也不用因为js内容的变化,导致css缓存失效
更快的渲染速度,浏览器是同时可以并行加载多个静态资源,当我们将css从js中抽离出来时,能够加快js的加载与解析速度,最终加快页面的渲染速度
更好的代码可读性,独立的css文件更方便代码的阅读与调试
npm i mini-css-extract-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 引入相关
module.exports = {
module: {
rules: [
{
test: /.css$/,
use: [
//'style-loader', 这回不使用这个loader了
MiniCssExtractPlugin.loader, // 能提取js中的css成单独文件
'css-loader',
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/build.css' // 默认会生成main.css文件在输出文件的位置上,可以通过filename自定义。html文件会自动用link标签引入这个.css文件。
})
]
}
这样减少了js文件体积,css也通过link标签去单独引入,就不会出现闪屏现象。
每个浏览器对一些css属性的支持情况是不一样的,需要一个postcss库的帮助,去针对性的对每个浏览器做兼容。
npm i postcss-loader postcss-preset-env -D
postcss-preset-env可以通过环境的识别加载不同的配置,能够让兼容性精确到每一个浏览器的版本。
原理是帮postcss找到package.json中browserlist字段里面的配置,通过配置生成指定的css兼容样式
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 引入相关
module.exports = {
module: {
rules: [
{
test: /.css$/,
use: [
//'style-loader', 这回不使用这个loader了
MiniCssExtractPlugin.loader, // 能提取js中的css成单独文件
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss', // 固定写法,应该是表示要修改postcss
plugins: () => { // 使用postcss的插件
require('postcss-preset-env')()
}
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/build.css' // 默认会生成main.css文件在输出文件的位置上,可以通过filename自定义。html文件会自动用link标签引入这个.css文件。
})
]
}
同时还需要在package.json中设置
{
"browserlist": {
// 开发模式可以只写自己调试用的浏览器
"development" : [
"last 1 chrome version" // 兼容chrome最近的一个版本
],
// 生产环境(默认),和webpack中mode配置无关
"production": [
">0.2%", // 大于0.2%的浏览器都兼容
"not dead", // 已经淘汰的浏览器不要兼容,例如ie8
"not op_mini all", // 所有op浏览器都不要兼容
]
}
}
如果需要使用browserlist里的开发模式,需要在webpack中修改node的环境变量。
process.env.NODE_ENV = 'development' // 让这个项目在node的开发环境中运行
这样,打包后的css样式属性就会自动添加前缀来兼容不同的浏览器。在开发中可以点击元素审查看到。
browserlist字段有很多设置,可以百度。
就是压缩打包的css文件。
需要安装以下插件
npm i optimize-css-assets-webpack-plugin -D
const OptimizeCssAssetsWebpackPlugin = require('mini-css-extract-plugin') // 引入相关
module.exports = {
plugins: [
new OptimizeCssAssetsWebpackPlugin()
]
}
可能css文件少的时候,效果不明显,但是当文件积累越来越多,优势就越来越明显。