webpack4.+的使用（二）(css、less、file-loader的使用)

最新推荐文章于 2024-05-06 16:12:55 发布

原创最新推荐文章于 2024-05-06 16:12:55 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何使用Webpack4+来处理CSS、LESS样式表以及图片文件，通过具体步骤和代码示例，展示了css-loader、less-loader和url-loader的配置与应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack4.+的使用（二）(css、less、file-loader的使用)

一、css-loader的基本使用

1、进入项目目录，下载webpack，在cmd中输入npm i webpack -g下载webpack开发依赖，并在cmd中输入npm init --yes初始化package.json。

2、进入项目目录，在cmd中输入npm i css-loader style-loader -D下载处理样式时需要的loader，如下图：
在这里插入图片描述

3、创建entry.js、index.html、index.css、webpack.config.js文件，文件中的内容如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复习webpack</title>
	</head>
	<body>
        <!--index.html-->
		<script src="./bundle.js"></script>
	</body>
</html>

/*index.css*/
body{
	background: skyblue;//设置背景为天蓝色
}

//entry.js
import './index.css' //引用index.css
document.write("Hello! It's Review Project!");//entry.js

//webpack.config.js
module.exports = {
	//入口
	entry:{
		"entry":"./entry.js"
	},
	//出口
	output:{
		filename:"./bundle.js"
	},
	module:{
		rules:[
			{	
                //这里配置的是css-loader
				test:/\.css$/,// 正则表达式，指明要处理的文件类型
				use:['style-loader','css-loader']// 处理资源所使用的loader, 处理顺序为从右向左
			}
		]
	}
};

4、使用webpack命令webpack entry.js -o bundle.js重新编译项目，编译成功后，运行index.html，可看到页面背景色为天蓝色，如下图：
在这里插入图片描述

二、url-loader的基本使用

1、对文件的处理，webpack需要url-loader和file-loader，在cmd中输入npm i url-loader file-loader -D下载处理图片文件的loader。

2、在index.html、entry.js、webpack.config.js中分别新增如下代码，并在当前目录中存放一张k.jpg的图片，如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复习webpack</title>
	</head>
	<body>
		<div id="app"></div><!--新增的div-->
		<script src="./bundle.js"></script>
	</body>
</html>

import './index.css'
import imgSrc from './k.jpg'//引入当前目录的图片
import Vue from './vue.js';//引入当前目录的vue.js
document.write("Hello! It's Review Project!");
new Vue({
	el:'#app',
	template:'<div><img :src="imgSrc"/></div>',//vue模板的用法之一
	data(){
		return{
			imgSrc:imgSrc//返回当前的url，这样上面的模板才能直接调用
		}
	}
});

module.exports = {
	//入口
	entry:{
		"entry":"./entry.js"
	},
	//出口
	output:{
		filename:"./bundle.js"
	},
	module:{
		rules:[
			{
				test:/\.css$/,// 正则表达式，指明要处理的文件类型
				use:['style-loader','css-loader']// 处理资源所使用的loader, 处理顺序为从右向左
			},
			{
				test:/\.(jpg|png|jpeg|gif|svg)$/,//处理图片新增的代码
				loader:'url-loader'
			}
		]
	}
};

3、此时的目录结构如下图：
在这里插入图片描述
4、使用webpack命令webpack entry.js -o bundle.js重新编译项目，编译成功后，运行index.html，图片显示在了页面上(图片后面有天蓝色，是因为上面没有去掉body的颜色)，如下图：

三、less-loader的基本使用

1、在cmd中输入命令npm i less less-loader -D下载处理.less文件的loader。

2、新增一个index.less文件，修改entry.js、webpack.config.js文件，如下：

//webpack.config.js文件
module.exports = {
	//入口
	entry:{
		"entry":"./entry.js"
	},
	//出口
	output:{
		filename:"./bundle.js"
	},
	module:{
		rules:[
			{
				test:/\.css$/,// 正则表达式，指明要处理的文件类型
				use:['style-loader','css-loader']// 处理资源所使用的loader, 处理顺序为从右向左
			},
			{
				test:/\.(jpg|png|jpeg|gif|svg)$/,//处理图片新增的
				loader:'url-loader'
			},
			{
				test:/\.less$/,
				loader:'style-loader!css-loader!less-loader'//处理.less文件新增的
			}
		]
	}
};

//entry.js  删除上面两步中的内容。只引入.less文件即可
import './index.less'

//新增.less文件，进行图片的导入
@imgPath:'./k.jpg';
body{
	background-image:url(@imgPath); 
}

3、使用webpack命令webpack entry.js -o bundle.js重新编译项目，编译成功后，运行index.html，图片显示在了页面上，如下图：
在这里插入图片描述