lyz自学笔记
文章目录
前言
webpack如果要编译css、less等样式文件,需要使用loader帮忙翻译
提示:以下是本篇文章正文内容,下面案例可供参考
一、如何打包样式文件
1、在src下分别创建index.css和index.less文件,并且在里面写一些样式
//index.css文件
html, body{
margin: 0;
padding: 0;
height: 100%;
background-color: pink;
}
//index.less文件
#title{
color: red;
}
2、在src下创建一个index.js文件,将index.less和index.css文件导入进来
//引入样式资源
import './index.css'
import './index.less'
3、webpack配置文件
- 因为webpack不能直接编译css、less文件,所以就需要Loader帮忙将css、less文件翻译成webpack可以认识的模块,所以必须创建webpack配置文件
- webpack配置文件:
①、作用:指示webpack去做什么!(当你运行webpack指令时,会加载里面的配置)
②、所有构建工具都是基于nodejs平台运行的,模块化默认采用CommonJs
③。具体配置
//resolve用来拼接绝对路径的方法
const {resolve} = require('path')
//webpack配置,使用CommonJs暴露出去
module.exports = {
//入口起点:./src/index.js
entry:'./src/index.js',
//输出路径,output是一个对象,打包后输出到当前文件下
output:{
filename:'built.js',
path:resolve(__dirname,'build')
},
//loader的配置
module:{
//编译的规则
rules:[
//详细的loader配置
{
//匹配哪些文件:匹配css文件,其他文件运行到这里跳过
test:/\.css$/,
//使用哪些loader进行处理
use:[
//use数组中loader执行顺序:从右到左,从下到上,依次执行
//'style-loader':创建style标签,将js中的样式资源插入,添加到head中生效
'style-loader',
//‘css-loader’:将css文件变成CommonJs模块加载js中,里面内容样式字符串
'css-loader'
]
},
{
test:/\.less$/,
use:[
'style-loader',
'css-loader',
//将less文件编译成css文件
'less-loader'
]
}
]
},
//plugins的配置
plugins:[
],
//模式
mode:'development' //开发模式
// mode:'production'
}
4、webpack配置文件写完后,需要将当前包变成一个包,然后下载webpack和webpack-cli
5、因为我们在配置文件使用了‘‘’style-loader’、'css-loader’和’less-loader’,所以需要下载这三个loader
npm i css-loader style-loader -D
npm i less-loader -D
6、下载完成后使用webpack命令就可以编译了,它会自动根据配置文件中的配置编译。
7、创建一个index.html文件,将打包后的built.js文件引入,就可以了
二、总结
1、loader的配置写到module里的rules中,一个对象处理一种资源