webpack5-基础入门-02-处理样式资源

最新推荐文章于 2024-06-19 21:56:52 发布

长沙xtt

最新推荐文章于 2024-06-19 21:56:52 发布

阅读量72

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/weixin_40746230/article/details/125152094

版权

webpack 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

CSS. Less Sass Scss Stylus等样式资源

1 处理CSS资源

webpack本身不能识别样式资源，需要借助Loader来帮助Webpack解析样式资源

新建src/css/index.css

.box1{
	width: 100%;
	height:100px;
	background-color: pink;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>webpack</title>
	</head>
	<body>
		<a>hello world</a>
		<div class="box1"></div>
		<script src="../dist/main.js"></script>
	</body>
</html>

main.js引入

import count  from "./js/count.js"
import sum from "./js/sum.js"
//要想webpack打包资源必须引入该资源
import "./css/index.css"
console.log(count(2,1));
console.log(sum(1,2,3,4));

安装 npm install --save-dev css-loader npm i style-loader -D

配置 webpack.config.js

//基于node 采用commonJs模块化
const path=require("path");//node.js核心模块 专门来处理路径问题
module.exports={
//入口
entry:"./src/main.js",
//输出
output:{
	//文件输出路径
	//__dirname node.js的变量。代表当前文件的文件夹目录
	path:path.resolve(__dirname,"dist"), //绝对路径
	//文件名
	filename:"main.js"
},
//加载器
module:{
	rules:[
	//loader的配置	
	  {
	        test: /\.css$/i, //只检测.css文件
	        use: [//执行顺序 从右到左 从下到上
				"style-loader",//将JS中css通过创建style标签添加html文件中生效
				 "css-loader" ,//将CSS资源编译成commonjs的模块到js中
		], 
	      },
	],
},
//插件
plugins:[
	//plugin的配置
],
//模式
mode:'development'
}

执行npx webpack

2处理less资源

新建src/less/index.less main.js中引入

.box2{
	width: 100px;
	height: 100px;
	background-color: deeppink;
}

//main.js
import "./less/index.less";

配置

npm install less less-loader --save-dev

webpack.config.js 添加规则 module - rules

	{
		        test: /\.less$/,
		        use: [{
		          loader: "style-loader" // creates style nodes from JS strings
		        }, {
		          loader: "css-loader" // translates CSS into CommonJS
		        }, {
		          loader: "less-loader" // compiles Less to CSS
		        }]
		      }

3.处理sass less 资源

npm i sass-loader sass -D

	 {
			         test:/\.s[ac]ss$/i,
			         use: [{
			           loader: "style-loader" // creates style nodes from JS strings
			         }, {
			           loader: "css-loader" // translates CSS into CommonJS
			         }, {
			           loader: "less-loader" // compiles Less to CSS
			         }]
			       },

4.处理styl资源

npm i stylus-loader -D

stylus-loader:负责将Styl文件编译成css文件

	    {
		 test: /\.styl$/, // 匹配对应.styl后缀的文件
 use: ['style-loader', 'css-loader', 'stylus-loader'] // 使用那些loader来处理这个文件
				       }

5.处理图片资源

	{
				test: /\.(png|jpe?g|gif|webp)$/,
				type: "asset",
				parser: {
					dataUrlCondition: {
						//- 优点：减少请求数量
                          //缺点：体积变得更大
						maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
					}
				}
			},,