0
点赞
收藏
分享

微信扫一扫

【Webpack】-css,less,图片的打包及压缩优化

孟祥忠诗歌 2024-01-05 阅读 6

一、打包CSS代码

由于Webpack默认只识别js代码,所以打包css代码需要其他一些东西来帮忙

加载器css-loader:解析css代码

加载器style-loader:把解析后的css代码插入到DOM

步骤:

1.准备css文件代码引入到src/login/index.js中(压缩转译处理等)

2.下载css-loader和style-loader本地软件包

3.配置webpack.config.js让Webpack拥有该加载器功能

4.打包后观察效果

【Webpack】-css,less,图片的打包及压缩优化_css

二、优化-提取css代码

插件mini-css-extract-plugin:提取css代码

步骤:

1.下载mini-css-extract-plugin本地软件包

2.配置webpack.config.js让Webpack拥有该插件功能

3.打包后观察效果

注意:不能和sty-loader一起使用

好处:css文件可以被浏览器缓存,减少js文件体积【Webpack】-css,less,图片的打包及压缩优化_Webpack_02

/**
 * 目标6:优化-提取 css 代码到单独的 css 文件中
 *  6.1 下载 mini-css-extract-plugin 本地软件包
 *  6.2 配置 webpack.config.js 让 Webpack 拥有该插件功能
 *  6.3 打包后观察效果
 */
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
    //入口
    entry: path.resolve(__dirname, 'src/login/index.js'),
    //出口
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: './login/index.js',
        clean: true //生成打包后内容之前,清空输出目录
    },
    //插件
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'public/login.html'),//模板文件
            filename: path.resolve(__dirname, 'dist/login/index.html')//输出文件
        }),
        new MiniCssExtractPlugin()//生成CSS文件
    ],
    //加载器(让webpack 识别更多模块文件内容)
    module: {
        rules: [
            {
                test: /\.css$/i,
                // use: ['style-loader', 'css-loader'],
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            },
        ],
    },
};

三、优化-压缩过程

问题:css代码提取后没有压缩

解决:使用css-minimizer-webpack-plugin插件

步骤:

1.下载css-minimizer-webpack-plugin本地软件包

2.配置webpack.config.js让webpack拥有该功能

3.打包重新观察

【Webpack】-css,less,图片的打包及压缩优化_html_03

【Webpack】-css,less,图片的打包及压缩优化_html_04

/**
 * 目标7:优化-压缩 css 代码
 *  7.1 下载 css-minimizer-webpack-plugin 本地软件包
 *  7.2 配置 webpack.config.js 让 Webpack 拥有该插件功能
 *  7.3 打包后观察效果
 */
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
    //入口
    entry: path.resolve(__dirname, 'src/login/index.js'),
    //出口
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: './login/index.js',
        clean: true //生成打包后内容之前,清空输出目录
    },
    //插件
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'public/login.html'),//模板文件
            filename: path.resolve(__dirname, 'dist/login/index.html')//输出文件
        }),
        new MiniCssExtractPlugin()//生成CSS文件
    ],
    //加载器(让webpack 识别更多模块文件内容)
    module: {
        rules: [
            {
                test: /\.css$/i,
                // use: ['style-loader', 'css-loader'],
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            },
        ],
    },
    //优化
    optimization: {
        //最小化
        minimizer: [
            // 在 webpack@5 中,你可以使用 `...` 语法来扩展现有的 minimizer(即 `terser-webpack-plugin`),将下一行取消注释
            `...`,
            new CssMinimizerPlugin(),
        ],
    },
   };

四、打包less代码

加载器less-loader:把less代码编译为css代码

步骤:

1.新建less代码(设置背景图)并引入到src/login/index.js中

2.下载lessless-loader本地软件包

3.配置webpack.config.js让Webpack软件包使用

注意:less-loader需要配合less软件包使用

【Webpack】-css,less,图片的打包及压缩优化_Webpack_05

【Webpack】-css,less,图片的打包及压缩优化_Webpack_06

/**
 * 目标8:打包 less 代码
 *  8.1 新建 less 代码(设置背景图)并引入到 src/login/index.js 中
 *  8.2 下载 less 和 less-loader 本地软件包
 *  8.3 配置 webpack.config.js 让 Webpack 拥有功能
 *  8.4 打包后观察效果
 */
// 8.1 新建 less 代码(设置背景图)并引入到 src/login/index.js 中
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
    //入口
    entry: path.resolve(__dirname, 'src/login/index.js'),
    //出口
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: './login/index.js',
        clean: true //生成打包后内容之前,清空输出目录
    },
    //插件
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'public/login.html'),//模板文件
            filename: path.resolve(__dirname, 'dist/login/index.html')//输出文件
        }),
        new MiniCssExtractPlugin()//生成CSS文件
    ],
    //加载器(让webpack 识别更多模块文件内容)
    module: {
        rules: [
            {
                test: /\.css$/i,
                // use: ['style-loader', 'css-loader'],
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            },
            {
                test: /\.less$/i,
                use: [
                    // compiles Less to CSS
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader',
                ],
            },
        ],
    },
    //优化
    optimization: {
        //最小化
        minimizer: [
            // 在 webpack@5 中,你可以使用 `...` 语法来扩展现有的 minimizer(即 `terser-webpack-plugin`),将下一行取消注释
            `...`,
            new CssMinimizerPlugin(),
        ],
    },

};

五、打包图片

资源模块:Webpack5内置资源模块(字体,图片等)打包,无需额外loader

步骤:

1.配置webpack.config.js让Webpack拥有打包图片功能

占位符【hash】对模块内容做算法计算,得到映射的数字字母组合的字符串

占位符【ext】使用当前模块原本的占位符,例如:.png/.jppg等字符串

占位符【query】保留引入文件时代码中查询参数(只用URL下生效)

2.打包后观察效果和区别

注意:判断临界值默认为8KB

大于8KB文件:发送一个单独的文件并导出URL地址

小于8KB文件:导出一个data URL(base64字符串)

【Webpack】-css,less,图片的打包及压缩优化_html_07


举报

相关推荐

0 条评论