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()
}
}