css文件怎么写使⽤“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$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
}
}
这⾥还是要提醒⼀下，如果只有⼀个⼊⼝filename写不写硬编码都没关系，因为就只有⼀个⼊⼝，但如果有多个⼊⼝，那就不能使⽤硬编码了，不然后⾯⼊⼝⽣成的css⽂件会覆盖前⾯⽣成的。这是我之前在extract-text-webpack-plugin踩过的坑。
三、最后
是的，到此，mini-css-extract-plugin的基本使⽤就这么些了，要看更多的使⽤，还是看哈。
好了，继续研究其他CSS相关的知识。rem、postcss、sass、less、...

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