使用“mini-css-extract-plugin”提取css到单独的文件

更新时间:2023-07-23 14:04:32 阅读: 评论:0

使⽤“mini-css-extract-plugin”提取css到单独的⽂件
⼀、前⾔
我们在使⽤webpack构建⼯具的时候,通过style-loader,可以把解析出来的css通过js插⼊内部样式表的⽅式到页⾯中,插⼊的结果如下:<style>
.wrapper {小学生钢笔字帖
width:100%;
height:50px;
}
.container {
width:1200px;
margin:0 auto;
}
...
生化战场</style>
如果不想使⽤这种⽅式,想⽤外部样式表的⽅式,那应该怎么做呢?
⼆、使⽤插件
伊人模特这⾥有两个插件可以⽤,extract-text-webpack-plugin和mini-css-extract-plugin,使⽤之后,就可以把css提取到单独的⽂件。通过配合html-webpack-plugin插件的使⽤,⽣成的html就会⾃动引⼊css⽂件啦,开⼼。
/* 这是提取css的⽂件,main.css */
.index-wrapper-qpZko {
width: 220px;
height: 50px;
}
...
<!-- 这是通过‘html-webpack-plugin’⽣成的html,会⾃动加⼊提取出来的公共css⽂件 -->
<link href="../main.css?9310f73f2ea21a1d0717" rel="stylesheet"></head>
通过ext ract-t ext-w ebpack-plugi n插件
在这⾥,extract-text-webpack-plugin不是重点,所以只介绍⼀下该插件需要注意的⼏个点:
如果是默认添加,不指定版本,则添加该插件只⽀持webpack 3
如果是需要需要添加其他webpack版本的⽀持,需要特别指定版本
# for webpack 4
npm install --save-dev extract-text-webpack-plugin@next
# for webpack 3
npm install --save-dev extract-text-webpack-plugin
太阳课文# for webpack 2
npm install --save-dev extract-text-webpack-plugin@2.1.2
# for webpack 1
npm install --save-dev extract-text-webpack-plugin@1.0.1
接下来,来看看mini-css-extract-plugin插件,这个是官⽅推荐的。
通过m i ni-css-ext ract-plugi n插件
mini-css-extract-plugin插件也是⽤来提取css到单独的⽂件的,该插件有个前提条件,只能⽤于webpack 4及以上的版本,所以如果使⽤的webpack版本低于4,,那还是⽤回extract-text-webpack-plugin插件。
直接来吧,优点啥的,⾃⼰上看看哈。
添加依赖
npm install --save-dev mini-css-extract-plugin
webpack配置
const MiniCssExtractPlugin = require("mini-css-extract-plugin");隐藏福字
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
module: {
rules: [
{
侧弓步
test: /\.css$/,
u: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
}
}
这⾥还是要提醒⼀下,如果只有⼀个⼊⼝filename写不写硬编码都没关系,因为就只有⼀个⼊⼝,但
左用英语怎么说如果有多个⼊⼝,那就不能使⽤硬编码了,不然后⾯⼊⼝⽣成的css⽂件会覆盖前⾯⽣成的。这是我之前在extract-text-webpack-plugin踩过的坑。
三、最后
是的,到此,mini-css-extract-plugin的基本使⽤就这么些了,要看更多的使⽤,还是看哈。
情侣名两个字好了,继续研究其他CSS相关的知识。rem、postcss、sass、less、...

本文发布于:2023-07-23 14:04:32,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/89/1093352.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:需要   添加   插件
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图