2022/2/17-webpack的loader相关配置

学习时间8:45~11:30
怕自己偷懒不学习，决定每一天都要记录学习的内容，做做笔记。
webpack使用css文件的配置，可以查看官网文档，指路：https://www.webpackjs.com/loaders/

1.首先在终端安装一下npm install --save-dev css-loader
2.再在配置文件里配置
module.exports = {
module: {
rules: [
{
test: /.css$/,
use: [ ‘style-loader’, ‘css-loader’ ]
}
]
}
}
3.在js文件中依赖css文件
require(’./css/normal.css’)
4.重新打包一下

其他的配置也是大同小异
图片文件的处理需要注意
//当加载的图片小于limit时,会将图片编译成base64字符串形式
//当加载的图片大于limit时,需要使用file-loader模块进行加载
limit: 9000,
name: ‘img/[name].[hash:8].[ext]’ //'获取变量名字name.哈希值前八位.文件扩展名’来做打包完的图片

总结: 版本问题还蛮多的 在后面追加@版本号, 指定版本可解决.