webpack-css文件合并和压缩和css兼容处理

(1): css文件合并(mini-css-extract-plugin)

 yarn add -D mini-css-extract-pluginconst 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-pluginplugins: [new MiniCssExtractPlugin({ // 抽取css放在公共文件夹filename: 'index.css' // 合并css的公共文件})]

npx webpack打包,可以看到我们所有的css文件都被统一到index.css文件夹下了

(2): css文件压缩

1： (optimize-css-assets-webpack-plugin)

 yarn add -D  optimize-css-assets-webpack-pluginconst OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css// 压缩cssoptimization: {minimizer: [new OptimizeCssAssetsWebpackPlugin]},

npx webpack打包,可以看到index.css文件都被压缩为一行

2： (css-minimizer-webpack-plugin)推荐使用

 yarn add -D css-minimizer-webpack-pluginconst CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin") // 最新压缩cssplugins: [// css-minimizer-webpack-pluginnew CssMinimizerWebpackPlugin() // 压缩css]

npx webpack打包,可以看到index.css文件都被压缩为一行

(3): css添加前缀,兼容浏览器

 yarn add postcss postcss-loader postcss-preset-envyarn add autoprefixer

webpack.config.js配置如下

 const commonCssConfig = [ // 公共的css配置MiniCssExtractPlugin.loader,"css-loader",{loader: "postcss-loader",options: {//css兼容性配置postcssOptions: {plugins: [[require("postcss-preset-env")()]],},},},
];// 装载器配置module: {rules: [{test: /\.css$/,use: [...commonCssConfig], // css顺序是从右到左，从下到上},{test: /\.less$/,use: [...commonCssConfig,'less-loader'], // less顺序是从右到左，从下到上},{test: /\.scss$/,use: [...commonCssConfig,"sass-loader"], // sass顺序是从右到左，从下到上},],},

新建postcss.config.js

 module.exports={plugins:[require('autoprefixer')]
}

package.json里边的配置如下

   "browserslist": ["Firefox > 20","iOS >= 7","ie >= 8","last 5 versions","> 5%"]

npx webpack 打包，可以看到css添加上了前缀了,是不是so easy

完整的代码如下

 // webpack是基于node,所以使用module.exports
const path = require("path");let HtmlWebpackPlugin = require("html-webpack-plugin"); // 生成html模板const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 每次打包前,清除distconst MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 合并css// const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin") // 压缩cssconst CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin"); // 最新压缩cssconst TerserWebpackPlugin = require("terser-webpack-plugin"); // 压缩js 代替uglify 因为uglifyjs不支持es6语法，所以用terser-webpack-plugin替代uglifyjs-webpack-pluginconst commonCssConfig = [ // 公共的css配置MiniCssExtractPlugin.loader,"css-loader",{loader: "postcss-loader",options: {//css兼容性配置postcssOptions: {plugins: [[require("postcss-preset-env")()]],},},},
];module.exports = {// 老版压缩css// optimization: {//   minimizer: [new OptimizeCssAssetsWebpackPlugin]// },// 入口配置entry: "./src/index.js",// 模式配置mode: "production", // 指定模式，默认是生产模式，开发模式便于查看代码// 出口配置output: {path: path.resolve(__dirname, "dist"), // __dirname 代表的是根目录  M:\47-webpack-study\01-webpack\distfilename: "index.js", // 指定输出的文件名},// webpack-dev-server配置devServer: {host: "localhost", // 主机port: "9527", // 端口open: true, // 自动打开historyApiFallback: true, //找不到页面默认跳index.htmlcompress: true, //一切服务都启用gzip 压缩hot: true, //启动热更新proxy: {// 代理配置"/api": {target: "http:localhost:5000",changeOrigin: true,},},},// 装载器配置module: {rules: [{test: /\.css$/,use: [...commonCssConfig], // css顺序是从右到左，从下到上},{test: /\.less$/,use: [...commonCssConfig,'less-loader'], // less顺序是从右到左，从下到上},{test: /\.scss$/,use: [...commonCssConfig,"sass-loader"], // sass顺序是从右到左，从下到上},],},// 插件配置plugins: [// html-webpack-pluginnew HtmlWebpackPlugin({template: "./src/index.html", // 指定模板filename: "index.html", // 指定输出的文件名}),// new HtmlWebpackPlugin({ // 多模板//   template: './src/index.html', // 指定模板//   filename: 'main.html', // 指定输出的文件名// }),// clean-webpack-pluginnew CleanWebpackPlugin(), // 使用这个插件在每次生成dist目录前，先删除dist目录// mini-css-extract-pluginnew MiniCssExtractPlugin({// 抽取css放在公共文件夹filename: "index.css", // 合并css的公共文件}),// css-minimizer-webpack-pluginnew CssMinimizerWebpackPlugin(), // 新版压缩css// terser-webpack-pluginnew TerserWebpackPlugin({// 压缩jstest: /\.js(\?.*)?$/i, //匹配参与压缩的文件parallel: true, //使用多进程并发运行terserOptions: {//Terser 压缩配置output: { comments: false },compress: {pure_funcs: ["console.log"], // 去除console.log},},extractComments: true, //将注释剥离到单独的文件中}),],
};

webpack-css文件合并和压缩和css兼容处理相关推荐

requireJS对文件合并与压缩（二）
requireJS对文件合并与压缩 RequireJS提供了一个打包与压缩工具r.js,r.js的压缩工具使用UglifyJS进行压缩的或Closure Compiler.r.js下载 require ...
RequireJS对文件合并与压缩实现方法
RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJ ...
html如何引入css文件？HTML引入外部css文件的四种方法
在学习前端的时候,我们应该知道css给html标记添加各种样式,用来告诉浏览器,因该如何显示这些标记里面的内容.既然css是用来给html添加各种样式的,那么,html中如何引入外部的css文呢?本篇 ...
php laravel 加载css,Laravel无法加载css文件(Laravel can't load css file)
Laravel无法加载css文件(Laravel can't load css file) 我无法在Laravel项目中加载css文件. /public/css/style.css确实存在IDE确认, ...
PHP自动压缩CSS文件方法,php 压缩多个CSS文件的实现代码
/* * 压缩css文件 * by www.jbxue.com /* header('Content-type: text/css'); ob_start("compress"); ...
style 放入css文件失效_React中使用CSS的7种方式
来源 | http://www.fly63.com/article/detial/1961 1.在组件中直接使用style 不需要组件从外部约会css文件,直接在组件中书写. import react ...
获取js里添加的css文件,用JS添加一个css文件
我在这里发现了一些关于我的问题的问题,但我无法使用它. 通过JS点击它们时我会改变的CSS属性,JQuery的用JS添加一个css文件 Green Red /*$(document).ready(fu ...
php中怎么应用css文件,利用PHP怎么下载CSS文件中的图片
利用PHP怎么下载CSS文件中的图片发布时间:2020-12-18 16:14:49 来源:亿速云阅读:87 作者:Leah 这篇文章给大家介绍利用PHP怎么下载CSS文件中的图片,内容非常详细, ...
加载css文件的几种方法,CSS 引入方式
HTML 中引入 CSS 的方式有 4 种方式可以在 HTML 中引入 CSS.其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码,另外两种是引入外部 CSS 文件.下面我们就来看看这 ...

webpack-css文件合并和压缩和css兼容处理

(1): css文件合并(mini-css-extract-plugin)

npx webpack打包,可以看到我们所有的css文件都被统一到index.css文件夹下了

(2): css文件压缩

npx webpack打包,可以看到index.css文件都被压缩为一行

npx webpack打包,可以看到index.css文件都被压缩为一行

(3): css添加前缀,兼容浏览器

npx webpack 打包，可以看到css添加上了前缀了,是不是so easy

完整的代码如下

webpack-css文件合并和压缩和css兼容处理相关推荐

最新文章

热门文章