webpack+vite前端构建工具 -4webpack处理css & 5webpack处理资源文件

4webpack处理css

又名css与资源文件处理。

4.1 为什么要处理css

webpack不能识别css

从js引入css，一定会打包失败（webpack不能解析css）。

webpack只能处理js，其他所有文件都不能处理。

这也是loader存在的意义------webpack只能解析js，项目中引入其他文件，就用到loader进行处理。

4.2 如何处理css

4.2.1 loader帮助webpack识别css

项目中能引入css，那么就需要引入loader，让webpack可以解析css（不会报错）------Css-loader（让webapck识别css）

4.2.2 webpack识别css后通过loader/plugin处理css

以上只能让webpack可以识别css，但具体webpack要如何处理css，此时有2个方法

• style-loader：将识别css后的结果交给style-loader，然后style-loader将css写入js，项目打开后通过执行js将css内容作为style标签插入html
• mini-css-extra-plugin：项目较大时将css提取为单独文件

4.2.3 打包失败without loader

// test.css
* {
    padding: 0;
}

// app.js
import b from './a.js'
import "./test.css"

(() => {
    let a = 23;
    console.log(b);
    console.log(a);
})()

报错，提示可能需要loader处理

除js文件，其他任何类型文件都需要一个loader去处理

4.2.4 安装&配置loader

1 安装css-loader

安装Css-loader，命令：npm install css-loader style-loader mini-css-extra-plugin --save-dev

npm官网，https://www.npmjs.com/，可以查询相应npm包是否存在

mini-css-extra-plugin改名成mini-css-extract-plugin了。

安装成功

// package.json
{
  "name": "webpackDemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack",
    "webpack-dev-server": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "5.82"
  },
  "devDependencies": {
    "@babel/core": "^7.27.4",
    "@babel/preset-env": "^7.27.2",
    "babel-loader": "^10.0.0",
    "css-loader": "^7.1.2",
    "eslint": "^9.29.0",
    "eslint-webpack-plugin": "^5.0.2",
    "mini-css-extract-plugin": "^2.9.2",
    "style-loader": "^4.0.0",
    "webpack-dev-server": "^5.2.2"
  }
}

2 配置css-loader

module.exports = {
    // loader
    module: {
        rules: [
            {
                // 每个对象是一个loader
                test: /\.js$/,
                // loader: "babel-loader", // 写法1
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css/,
                use: ["css-loader"]
            }
        ]
    }
}

3 打包

打包命令：webpack

打包成功，查看打包文件

webpack将css写到js文件中，但下一步如何处理css没有告诉webpack.

4 配置style-loader并打包

将css作为style标签插入js文件。

// webpack.config.js
module.exports = {
    // loader
    module: {
        rules: [
            {
                // 每个对象是一个loader
                test: /\.js$/,
                // loader: "babel-loader", // 写法1
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css/,
                use: ["style-loader", "css-loader"]
            }
        ]
    }
}

打包。

可以看到打包的文件大了很多。

5 配置mini-css-extract-plugin并打包

现实中可能将其作为单独文件提取出来，需要用到mini-css-extract-plugin

已经在第一步完成安装。

1 引入插件

mini-css-extract-plugin是一个插件，需要在webpack.config.js引入。

// webpack.config.js
const minicss = require('mini-css-extract-plugin');

2 注册插件

// webpack.config.js
const minicss = require('mini-css-extract-plugin');
module.exports = {
    plugins: [
        new minicss({
            filename: 'test.bundle.css'// 打包的css文件名称
        })
    ],
}

3 配置loader

mini-css-extract-plugin有一个loader，需要将其加入到配置文件中

// webpack.config.js
const minicss = require('mini-css-extract-plugin');
module.exports = {
    // loader
    module: {
        rules: [
            {
                test: /\.css/,
                use: [minicss.loader, "css-loader"]
            }
        ]
    },
    plugins: [
        // new eslintplugin()
        new minicss({
            filename: 'test.bundle.css'// 打包的css名称
        })
    ]
}

4 打包结果

可以看到css文件打包出来了。

内容

// dist\test.bundle.css
/*!************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./test.css ***!
  \************************************************************/
* {
    padding: 0;
}

4.2.5 less的处理

以上是css的处理方案，如果项目里使用的是less、scss怎么处理呢?

道理是一样的，less最终会变为css.

因此会先用loader将less编译为css，然后将编译后的css交给css-loader，然后走上面的处理逻辑。

示例

less使用less-loader

// webpack.config.js
const minicss = require('mini-css-extract-plugin');
module.exports = {
    // loader
    module: {
        rules: [
            {
                test: /\.css/,
                use: [minicss.loader, "css-loader"]
            },
            {
                test: /\.less/,
                use: [minicss.loader, "css-loader", "less-loader"]
            }
        ]
    },
    plugins: [
        // new eslintplugin()
        new minicss({
            filename: 'test.bundle.css'// 打包的css名称
        })
    ]
}

注意loader的处理顺序，use: [minicss.loader, "css-loader", "less-loader"]对应的处理顺序是less-loader，css-loader，和minicss的loader.

less-loader也需要安装。

less、scss预处理语言就是比普通的css多了一步编译为css的过程。

4.3 压缩css

• 注意：不管是css还是less，打包出来的css文件都没有压缩代码，即便mode为production也没有进行压缩。
• 为什么没有压缩------webpack只能处理js，此时只能识别css但不能进行压缩
• 如何压缩css------使用css的压缩插件

4.3.1 安装插件

1 安装css-minimizer-webpack-plugin

命令：npm install css-minimizer-webpack-plugin --save-dev

4.3.2 引入&注册插件

2 引入并注册css-minimizer-webpack-plugin（插件）

// webpack.config.js
const cssminimizer = require('css-minimizer-webpack-plugin');
module.exports = {
    // loader
    module: {
        rules: [
        ]
    },
    plugins: [
        new cssminimizer()
    ]
}

4.3.3 打包

3 打包

可以看到css文件的css代码压缩为一行了。

5 webpack处理资源文件

本节介绍webpack如何处理图片、mp3、MP4等资源文件的处理。

对于不同类型的资源文件，webpack统一按照file-loader进行处理。

• 以图片为例，在js文件中引入图片。
• 注意此时又引入了新的文件类型，那么就需要一个loader来处理。
• 使用file-loader或url-loader
  • file-loader：基础loader，只负责让webpack识别和处理文件
  • url-loader：基于file-loader做了一层扩展（继承file-loader），例如转base64的功能。
• webpack5自带对资源文件的支持（webpack5中不用使用loader处理了）。

5.1 webpack处理图片文件

5.1.0 引入图片文件

1 在js文件引入图片文件

// app.js
import b from './a.js'
import "./test.css"
import img1 from "./img/两狗对视.jpg"
new Image().src = img1;// 使用图片
(() => {
    let a = 23;
    console.log(b);
    console.log(a);
})()

直接打包，不出所料会报错。

5.1.1 安装loader

命令：npm install file-loader url-loader --save-dev

url-loader可以用于转换为base64格式。

base64：减少请求，但文件体积较大。

url-loader需要file-loader，否则打包会报错

5.1.2 配置loader

// webpack.config.js
module.exports = {
    // loader
    module: {
        rules: [
        ]
    },
    // loader
    module: {
        rules: [
            {
                test: /\.(jpg|jpeg|png|gif|svg)$/,
                loader: "url-loader",
                options: {
                    limit: 20000,// 所有小于20000b的文件都转为base64格式
                    name: "[name][hash].[ext]"
                }
            }
        ]
    },
}

5.1.3 打包

命令：webpack

js的体积有一个明显的增大，之前的是几kb。

1 转为base64

转为base64的打包结果

2 不转base64

不转base64呢？limit修改一下，改为5000（推荐小于5kb的图片转为base64，大于5kb的图片不建议转为base64）

js为7kb.

可以看到这里使用src引入图片。

（mode为production）

5.2 mp3、tff处理

mp3、tff(字体图标）文件也可以用于处理。

// webpack.config.js
module.exports = {
    // loader
    module: {
        rules: [
        ]
    },
    // loader
    module: {
        rules: [
            {
                test: /\.(mp3|tff)$/,
                loader: "url-loader",
                options: {
                    limit: 20000,// 所有小于20000b的文件都转为base64格式
                    name: "[name][hash].[ext]"
                }
            }
        ]
    },
}

5.3 webpack5自带资源处理方案

webpack5处理资源文件的loader不需要安装，自带loader.

5.3.1 配置loader

// webpack.config.js
module.exports = {
    // loader
    module: {
        rules: [
        ]
    },
    // loader
    module: {
        rules: [
            {
                test: /\.(jpg|jpeg|png|gif|svg)$/,
                type: "asset",// asset/inline，图片转为base64, asset/resource, 图片单独打包，asset：根据图片大小进行选择
                parser: {
                    dataUrlCondition: {
                        maxSize: 5000// 小于5000的转为base64,
                    }
                },
                generator: {
                    filename: "[name][hash].[ext]"
                }
        ]
    },
}

5.3.2 打包

本例中图片大于5kb，没有转base64.

打包结果

maxSize改为20000