webpack提取css成单独文件、css兼容性处理、压缩css
一、提取css成单独文件
背景：我们之前打包构建的样式是在js中的，因为有css-loader将样式资源整合到js中了，而样式在js中会让js体积变得非常大，下载速度变得很慢，同时呢，是先加载js才能创建style标签插入到页面中，这里会出现闪屏现象，所以我们要做的事就是将css文件从js中提取出来。
解决方案：
如果想让css单独打包成一个独立的文件需要下载插件mini-css-extract-plugin。
该插件提供了一个MiniCssExtractPlugin.loader，这个loader取代style-loader，作用：提取js中的css成单独文件
下载：
npm i mini-css-extract-plugin@0.9.0引入：
const MiniCssExtractPlugin = require("mini-css-extract-plugin");使用：
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// 对输出的css文件进行重命名
filename: "assets/css/main.css",
}),
],
}webpack.config.js详细配置如下：
const { resolve } = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: "./src/js/index.js",
output: {
filename: "assets/js/index.js",
path: resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.css$/,
use: [
// 这个loader取代style-loader，作用：提取js中的css成单独文件
MiniCssExtractPlugin.loader,
"css-loader",
],
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
new MiniCssExtractPlugin({
// 对输出的css文件进行重命名
filename: "assets/css/main.css",
}),
],
devServer: {
contentBase: resolve(__dirname, "dist"),
compress: true,
port: 3000,
open: true,
},
mode: "development",
};二、css兼容性处理
需要使用postcss库，postcss要想在webpack中使用的话要使用postcss-loader，除了这个loader之外还需要使用postcss-preset-env插件，
postcss-preset-env作用：
能够帮助postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容样式，能够让我们兼容性做得精确到某一个浏览器的版本。
在package.json设置browserslist，开发环境只要兼容主要一些调试的浏览器版本就行，而生产环境需要多配置一些，兼容99.8%的浏览器，不要已经死的浏览器比如IE10
下载postcss库
npm i postcss-loader@3.0.0 postcss-preset-env@6.7.0 -D配置有两种写法
第一种写法：使用loader的默认配置：post-loader
第二种写法：自定义，修改loader配置的话，需要写成一个对象
module.exports = {
module: {
rules: [
{
loader:"postcss-loader",
options:{
ident:"postcss",
plugins:()=>[
// postcss的插件
require("postcss-preset-env")()
]
}
}
]
}
}webpack.config.js详细配置如下：
const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 设置nodejs环境变量
process.env.NODE_ENV = "development";
module.exports = {
entry: "./src/js/index.js",
output: {
filename: "assets/js/index.js",
path: resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.css$/,
use: [
// 这个loader取代style-loader，作用：提取js中的css成单独文件
MiniCssExtractPlugin.loader,
"css-loader",
// 使用loader的默认配置
// "postcss-loader",
//修改loader的配置
{
loader: "postcss-loader",
options: {
ident: "postcss",
plugins: () => [require("postcss-preset-env")()],
},
},
/*
"browserslist":{
// 开发环境-》设置node环境变量：process.env.NODE_ENV = "development"
"development":[
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
// 生产环境：默认是看生产环境，所以顶部需要配置成开发环境
"production":[
">0.2%",
"not dead",
"not op_mini all"
]
}
*/
],
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
new MiniCssExtractPlugin({
// 对输出的css文件进行重命名
filename: "assets/css/main.css",
}),
],
devServer: {
contentBase: resolve(__dirname, "dist"),
compress: true,
port: 3000,
open: true,
},
mode: "development",
};三、压缩css
需要使用optimize-css-assets-webpack-plugin插件（一般兼容性处理需要使用loader，压缩之类的需要插件来做）
下载
optimize-css-assets-webpack-plugin
npm i optimize-css-assets-webpack-plugin@5.0.3引入
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");调用
module.exports = {
plugins:[
new OptimizeCssAssetsWebpackPlugin()
]
}webpack.config.js详细配置如下：
const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
// 设置nodejs环境变量
process.env.NODE_ENV = "development";
module.exports = {
entry: "./src/js/index.js",
output: {
filename: "assets/js/index.js",
path: resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.css$/,
use: [
// 这个loader取代style-loader，作用：提取js中的css成单独文件
MiniCssExtractPlugin.loader,
"css-loader",
//修改loader的配置
{
loader: "postcss-loader",
options: {
ident: "postcss",
plugins: () => [require("postcss-preset-env")()],
},
},
],
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
new MiniCssExtractPlugin({
// 对输出的css文件进行重命名
filename: "assets/css/main.css",
}),
new OptimizeCssAssetsWebpackPlugin(),
],
devServer: {
contentBase: resolve(__dirname, "dist"),
compress: true,
port: 3000,
open: true,
},
mode: "development",
};来自：https://mp.weixin.qq.com/s/Iiw78_VJeJV-leGFllRoQA
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
