webpack-css⽂件合并和压缩和css兼容处理(1): css⽂件合并(mini-css-extract-plugin)
yarn add -D mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 合并css
// 装载器配置
module:{
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader,'css-loader'] // css顺序是从右到左，从下到上
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader,'css-loader','less-loader'] // less顺序是从右到左，从下到上
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader,'css-loader','sass-loader'] // sass顺序是从右到左，从下到上
},
]
},
// mini-css-extract-plugin
plugins: [
new MiniCssExtractPlugin({ // 抽取css放在公共⽂件夹
filename: 'index.css' // 合并css的公共⽂件
})
]
npx webpack打包，可以看到我们所有的css⽂件都被统⼀到index.css⽂件夹下了
(2): css⽂件压缩
1： (optimize-css-assets-webpack-plugin)
css最新
yarn add -D  optimize-css-assets-webpack-plugin
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css
// 压缩css
optimization: {
minimizer: [new OptimizeCssAssetsWebpackPlugin]
},
npx webpack打包，可以看到index.css⽂件都被压缩为⼀⾏
2： (css-minimizer-webpack-plugin)推荐使⽤
yarn add -D css-minimizer-webpack-plugin
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin") // 最新压缩css  plugins: [
// css-minimizer-webpack-plugin
new CssMinimizerWebpackPlugin() // 压缩css
]
npx webpack打包，可以看到index.css⽂件都被压缩为⼀⾏
(3): css添加前缀，兼容浏览器
yarn add postcss postcss-loader postcss-preset-env
yarn add autoprefixer
const commonCssConfig = [ // 公共的css配置
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
//css兼容性配置
postcssOptions: {
plugins: [[require("postcss-preset-env")()]],
},
},
},
];
// 装载器配置
module: {
rules: [
{
test: /\.css$/,
use: [..monCssConfig], // css顺序是从右到左，从下到上
},
{
test: /\.less$/,
use: [..monCssConfig,'less-loader'], // less顺序是从右到左，从下到上
},
{
test: /\.scss$/,
use: [..monCssConfig,"sass-loader"], // sass顺序是从右到左，从下到上
},
],
},
新建fig.js
plugins:[require('autoprefixer')]
}
package.json⾥边的配置如下
"browserslist": [
"Firefox > 20",
"iOS >= 7",
"ie >= 8",
"last 5 versions",
"> 5%"
]
npx webpack 打包，可以看到css添加上了前缀了，是不是so easy
完整的代码如下
// webpack是基于node，所以使⽤ports
const path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin"); // ⽣成html模板
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 每次打包前，清除dist
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 合并css
// const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin"); // 最新压缩css
const TerserWebpackPlugin = require("terser-webpack-plugin"); // 压缩js 代替uglify 因为uglifyjs不⽀持es6语法，所以⽤terser-webpack-plugin替代uglifyjs-w ebpack-plugin
const commonCssConfig = [ // 公共的css配置
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
//css兼容性配置
postcssOptions: {
plugins: [[require("postcss-preset-env")()]],
},
},
},
]
;
// ⽼版压缩css
// optimization: {
//  minimizer: [new OptimizeCssAssetsWebpackPlugin]
// },
// ⼊⼝配置
entry: "./src/index.js",
entry: "./src/index.js",
// 模式配置
mode: "production", // 指定模式，默认是⽣产模式，开发模式便于查看代码
/
/ 出⼝配置
output: {
path: solve(__dirname, "dist"), // __dirname 代表的是根⽬录  M:\47-webpack-study\01-webpack\dist    filename: "index.js", // 指定输出的⽂件名
},
// webpack-dev-server配置
devServer: {
host: "localhost", // 主机
port: "9527", // 端⼝
open: true, // ⾃动打开
historyApiFallback: true, //不到页⾯默认跳index.html
compress: true, //⼀切服务都启⽤gzip 压缩
hot: true, //启动热更新
proxy: {
// 代理配置
"/api": {
target: "http:localhost:5000",
changeOrigin: true,
},
},
},
// 装载器配置
module: {
rules: [
{
test: /\.css$/,
use: [..monCssConfig], // css顺序是从右到左，从下到上
},
{
test: /\.less$/,
use: [..monCssConfig,'less-loader'], // less顺序是从右到左，从下到上
},
{
test: /\.scss$/,
use: [..monCssConfig,"sass-loader"], // sass顺序是从右到左，从下到上
},
],
},
// 插件配置
plugins: [
// html-webpack-plugin
new HtmlWebpackPlugin({
template: "./src/index.html", // 指定模板
filename: "index.html", // 指定输出的⽂件名
}),
/
/ new HtmlWebpackPlugin({ // 多模板
//  template: './src/index.html', // 指定模板
//  filename: 'main.html', // 指定输出的⽂件名
// }),
// clean-webpack-plugin
new CleanWebpackPlugin(), // 使⽤这个插件在每次⽣成dist⽬录前，先删除dist⽬录
// mini-css-extract-plugin
new MiniCssExtractPlugin({
// 抽取css放在公共⽂件夹
filename: "index.css", // 合并css的公共⽂件
}),
/
/ css-minimizer-webpack-plugin
new CssMinimizerWebpackPlugin(), // 新版压缩css
// terser-webpack-plugin
new TerserWebpackPlugin({
// 压缩js
// 压缩js
test: /\.js(\?.*)?$/i, //匹配参与压缩的⽂件
parallel: true, //使⽤多进程并发运⾏
terserOptions: {
//Terser 压缩配置
output: { comments: false },
compress: {
pure_funcs: ["console.log"], // 去除console.log
},
},
extractComments: true, //将注释剥离到单独的⽂件中    }),
],
};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。