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,图片显示在了页面上,如下图: