webpack5修行之道4-webpack优化css处理及资源分类

最新推荐文章于 2024-09-21 11:51:03 发布

jay_mw

最新推荐文章于 2024-09-21 11:51:03 发布

阅读量405

点赞数

分类专栏： webpack 文章标签： node.js webpack 前端

本文链接：https://blog.csdn.net/j178202798/article/details/117258444

版权

本文介绍了如何使用webpack5对CSS进行优化，包括使用mini-css-extract-plugin提取CSS，postcss-loader处理兼容性，以及optimize-css-assets-webpack-plugin压缩CSS。同时，详细讲解了如何通过配置实现资源分类，如CSS、JS、图片和其他资源的分别存放，解决了资源路径问题，确保项目结构清晰且运行正常。

摘要由CSDN通过智能技术生成

上一篇：【webpack5修行之道】第3篇：webpack配置devServer

提取css

前面我们讲到，css不能被webpack处理，所以需要css-loader来进行翻译，css翻译的css字符串都被打包到了入口文件中了

我们尝试编译上一篇的代码，然后去查看编译后js文件：

可以看到，所有的css文件都在这个js文件中，

如果这个发布到生产环境，会产生什么效果？

1. 由于是js加载的时候才会动态插入样式到head里，会造成闪屏现象。

2.入口文件变大，项目启动缓慢

所以我们需要提取css，让他从js里抽离出来

使用插件mini-css-extract-plugin，安装: npm install -D mini-css-extract-plugin

修改webpack.config.js

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    //入口文件
    entry: './src/index.js',
    //打包后的文件配置
    output: {
        //指定输出的目录,一般采用绝对路径
        path: resolve(__dirname,'build'),
        filename: '[hash:10].built.js'
    },
    module: {
        //loader配置
        rules: [
            {
                //匹配以.css结尾的文件
                test: /\.css$/,
                //单个loader使用loader属性
                //loader: 'css-loader'

                //多个loader处理一个文件，需要使用use
                //use属性的执行顺序为逆序，也就是数组尾->数组首的顺序
                use: [
                    MiniCssExtractPlugin.loader,
                    // 'style-loader',
                    'css-loader'
                ]
            },
            {
                //匹配以.less结尾的文件
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // 'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {   
                //处理图片资源
                test: /\.(png|jpg|jpeg|gif|bmp)$/,
                loader: 'url-loader',
                options: {
                    //图片小于14kb,就会被base64处理，一般处理8-12KB的图片
                    //优点： 减少请求数量
                    //缺点： 图片体积会变大
                    limit: 14 * 1024,
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader',
                options: {
                    esModule: false
                }
            },
            {
                //打包其他资源，处理html/js/CSS以外的资源
                exclude: /\.(css|js|html|json|less|png|jpg|gif)$/,
                loader: 'file-loader',
                  
            }
        ]
    },
    //插件配置
    plugins:[
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        new MiniCssExtractPlugin()
    ],
    //环境配置
    mode: 'development',
    devServer: {
        //启动gzip压缩
        compress: true,
        //端口
        port: 8181,
        //自动打开默认浏览器
        open: true
    }
}

然后运行编译命令：npm run build，查看编译后的目录发现，main.css已经被提取出来了，index.html里也自动引入了main.css

css兼容性处理：

css有很多兼容性问题，我们在开发的时候不可能把所有浏览器的所有版本的兼容性样式写完，所以我们需要webpack帮我们来补全css的兼容性

这里使用postcss-loader来处理，postcss-loader依赖postcss，其中所以我们先安装包： npm install -D postcss postcss-loader

npm install -D postcss postcss-loader

修改webpack.config.js

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    //入口文件
    entry: './src/index.js',
    //打包后的文件配置
    output: {
        //指定输出的目录,一般采用绝对路径