在上一篇中,学习了 css-loader 这个组件.
它的作用在于.
- 在使用
webpack打包的时候. - 如过碰到
import xxx.css,就使用这个css-loader加载.css文件内容. - 如果仅仅只有
css-loader,.css文件里的的内容,仅仅只是写入打包的js代码(bundle.js).但在页面上并不会生效. - 当搭配
style-loader ['style-loader','css-loader']之后,可以将.css代码写入到页面的HTML文件的<head>中(以<style></style>形式).
less-loader & stylus-loader
到目前我们知道了,在 webpack.config.js 文件中,配置 module 节点的目的,是为了在 webpack 遇到 import require等导入文件的语句是,能够选择合理的 loader 去处理这些文件.
比如之前的
-
babel->.js处理import xxx.js 的文件文件.(当然,webpack本身是认识.js文件的,这里的主要是为了语法和API兼容处理) -
.css->style-loader & css-loader,处理import xxxx.css
在 前端开发中,有一些 CSS 样式预处理框架,比如 .
- less
- stylus
在前端开发中,我们也可以创建 .styl & .less 文件.
那么在 import xxx.styl 或者 import xxx.less 文件的时候,肯定也需要对应的loader来处理当前文件的打包工作.
less less-loader
新建一个 webpack.config.js 文件.
写入基本配置.
const path = require('path')
module.exports = {
entry: path.join(__dirname, 'app/index.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
loader:'babel-loader' // 两个作用 1. ESX -> ES5 2. API 垫片
},
{
test: /\.css$/,
loader: ['style-loader', 'css-loader']
}
}
这里,我配置了.css文件的 loader , 那么webpack在处理 import xxx.css就没有问题了.
新建一个 index.html文件.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p class="cssFile"></p>
<p class="lessFile"></p>
<p class="stylusFile"></p>
<script src="bundle.js"></script>
</body>
</html>
新建一个 css-file.css.
.cssFile {
text-align: center;
font-size: 30px;
text-decoration: underline;
}
.cssFile::after {
content: '这是 css-file.css文件提供的样式'
}
执行 npm run build
image.png
效果
image.png
css-loader ,配置成功.
同理新建一个 less-file.less 文件.
image.png
键入代码
.lessFile {
font-size: 20px;
text-align: center;
text-decoration: line-through;
color: royalblue;
&::after {
content:'这是less-file.less文件提供的样式'
}
}
安装 less & less-loader
npm i --save-dev less less-loader
在 webpack.config.js 的 moudle 节点中,配置对应 .less 文件的 loader
{
test: /\.less$/,
loader: ['style-loader', 'css-loader', 'less-loader']
},
在 index.js 中导入 import './assets/less-file.less'
执行 npm run build
image.png
打包成功.
查看界面
image.png
同理, 新建一个 styl(stylus格式文件的后缀名) 文件.
image.png
并键入一下代码
.stylusFile
font-size 40px
color pink
text-align center
&::after
content :' 这是 stylus-file.styl 文件提供的样式'
安装 stylus & stylus-loader
npm i --save-dev stylus stylus-loader
在 index.js 文件中导入 import './assets/stylus-file.styl'
执行 npm run build
image.png
查看界面
image.png
image.png
不管目标文件是.css,.less 还是 .styl.最终都是通过 style-loader 写到了页面当中.
**style-loader就是把css写入到HTML.head.style中的一个loader!!******
结论:
- 在
webpack中,一个模块就是一个文件.比如.css.less.styl. - 一般模块,都是单个文件,都是使用
import require来导入.
- 一般模块,都是单个文件,都是使用
- 处理模块的组件在
webpack.config.js一般是用module去配置. - 当
webpack打包的时候,碰到了模块,就去找对应的loader去处理.
.less文件打包配置
npm i --save-dev less less-loader-
webpack.config.js:{ test: /\.less$/, loader: ['style-loader', 'css-loader', 'less-loader'] },
.stylus文件打包配置
npm i --save-devi stylus stylus-loader-
webpack.config.js:{ test: /\.styl$/, loader: ['style-loader', 'css-loader', 'stylus-loader'] }
网友评论