打包处理css文件,先以模块的形式引入js
- 运行npm i style-loader css-loader -D 命令,安装处理css文件的loader
- 在webpack.config.js 的module -> rules 数组中,添加loader
module.exports = {
module:{
rules:[{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
}]
}
}
- test表示匹配的文件类型,use表示对应要调用的loader
- 注意
use数组中指定的loader顺序是固定的
多个loader的调用顺序,从后到前.
将css文件以模块的方式导入入口js文件
import ‘./index.css’;
将css文件打包成单独文件
- 使用插件 mini-css-extract-plugin 插件
- 下载安装 npm i mini-css-extract-plugin -D
- 引入插件 const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)
- 使用插件
plugins: [
new MiniCssExtractPlugin({
filename:'./src/css/index.css'
})
]
- 在rules使用MiniCssExtractPlugin,使css为单文件
module.exports = {
module:{
rules:[{
test:/\.css$/,
use:[
MiniCssExtractPlugin.loader,
'css-loader'
]
}]
}
}
处理css的浏览器兼容性
- 使用postcss处理,使用包:post-loader与postcss-preset-env
- 下载安装 npm i postcss-loader postcss-preset-env -D
- 在rules使用post-loader
module.exports = {
module:{
rules:[{
test:/\.css$/,
use:[
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
}]
}
}
- 在package.json设置browserslist,加载css的兼容范围,指定兼容的浏览器.
"browserslist":[
"0.2%",
"last 2 version",
"not dead"
]
- 修改loader配置,新版需要写postcss.config.js,使用postcss-preset-env插件
module.exports = {
plugins:[
require('postcss-preset-env')()
]
}
压缩css
- 使用optimize-css-assets-webpack-plugin插件
- 下载安装 npm i optimize-css-assets-webpack-plugin -D
- 引入插件 const OptimizeCssAssetsWebpackPlugin = require(‘optimize-css-assets-webpack-plugin’)
- 使用插件
plugins: [
new OptimizeCssAssetsWebpackPlugin()
]