大佬教程收集整理的这篇文章主要介绍了webpack 自学笔记 ---4 提取css文件&css兼容&压缩css,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
乾坤符箓:
提取css文件为单独文件(mini-css-extract-plugin)
css兼容(postcss)
压缩css(optimize-css-assets-webpack-plugin)
1、提取css文件为单独文件
const { resolve } = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { entry:"./src/index.js", output:{ filename:"build.js", path:resolve(__dirname,"build") }, //loader module:{ rules:[ { test:/.css$/, use:[ { loader:MiniCssExtractPlugin.loader, // 原先是"style-loader"(作用:创建style标签,将样式注入);现在是mini-css-extract-plugin(作用:提取js中的css成单独文件!)
options:{ publicPath:"../" } }, "css-loader" }, { test:/.less$/, use:[ { loader:MiniCssExtarct.loader, options:{ public:"../" } }, "css-loader","less-loader" ] } ] ] }, plugins:[ new HtmlWebpackPlugin({ template:"./src/index.html" }), new MiniCssExtractPlugin({ filename:"css/build.css",//对输出的css文件进行重命名 }) ], mode:"development" }
附魔:当使用'mini-css-extract-plugin'进行css文件独立打包,使用'url-loader'对css中引用的图片文件等进行打包时,发现:在html中的<img>标签内的图片可以正常显示,但在css中写在BACkground-image中的图片无法正常显示,这也就是我为什么在使用"mini-css-extract-plugin"时增加配置的原因
原先:
MiniCssExtractPlugin.loader => {
loader:MiniCssExtarctPlugin.loader,
options:{
publicPath:"../"
}
}
理由:找不到路径,我们就给它个公共的路径
css兼容处理
依赖:postcss-loader、postcss-preset-env;
postcss-preset-env作用:帮助postcss找到package.json中browerlist里配置,通过配置加载指定的css兼容样式(package.json里面配置需要兼容浏览器的版本)
设置node环境变量:
process.env.NODE_ENV = "development" //(设置即生效)
开打开打:
module.exprots = {
...
module:{
rules:[
test:/.css$/,
use:[
loader:MiniCssExtract.loader,
options:{
publicPath:"../"
}
},
"css-loader",
loader:"postcss-loader",
options:{
postcssOptions:{
ident:"postcss",
plugins:["postcss-preset-env"]
}
}
}
]
}
]
}
}
同时需要配置package.json里面兼容浏览器的版本配置
broswerslist:{
development:[
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
],
production:[
">0.2%",
"not dead",
"not op_mini_all"
]
}
打包前:
打包后:
压缩CSS
依赖:optimize-css-assets-webpack-plugin
开打开打:
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
...
plugins:{
...
new OptimizeCssAssetsWebpackPlugin()
}
}
以上是大佬教程为你收集整理的webpack 自学笔记 ---4 提取css文件&css兼容&压缩css全部内容,希望文章能够帮你解决webpack 自学笔记 ---4 提取css文件&css兼容&压缩css所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。