一、前言
我們在使用webpack構(gòu)建工具的時(shí)候,通過style-loader
,可以把解析出來的css通過js插入內(nèi)部樣式表的方式到頁面中,插入的結(jié)果如下:
<style>
.wrapper {
width:100%;
height:50px;
}
.container {
width:1200px;
margin:0 auto;
}
...
</style>
如果不想使用這種方式参淫,想用外部樣式表的方式,那應(yīng)該怎么做呢愧杯?
二涎才、使用插件
這里有兩個(gè)插件可以用,extract-text-webpack-plugin
和mini-css-extract-plugin
,使用之后力九,就可以把css提取到單獨(dú)的文件憔维。通過配合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>
通過extract-text-webpack-plugin插件
在這里程储,extract-text-webpack-plugin
不是重點(diǎn),所以只介紹一下該插件需要注意的幾個(gè)點(diǎn):
- 如果是默認(rèn)添加臂寝,不指定版本章鲤,則添加該插件只支持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
插件败徊,這個(gè)是官方推薦的。
通過mini-css-extract-plugin插件
mini-css-extract-plugin
插件也是用來提取css到單獨(dú)的文件的掏缎,該插件有個(gè)前提條件皱蹦,只能用于webpack 4及以上的版本煤杀,所以如果使用的webpack版本低于4,,那還是用回extract-text-webpack-plugin
插件沪哺。
直接來吧沈自,優(yōu)點(diǎn)啥的,自己上GitHub看看哈辜妓。
添加依賴
npm install --save-dev mini-css-extract-plugin
webpack配置
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
}
}
這里還是要提醒一下枯途,如果只有一個(gè)入口filename
寫不寫硬編碼都沒關(guān)系,因?yàn)榫椭挥幸粋€(gè)入口籍滴,但如果有多個(gè)入口酪夷,那就不能使用硬編碼了,不然后面入口生成的css
文件會覆蓋前面生成的孽惰。這是我之前在extract-text-webpack-plugin
踩過的坑捶索。
三、最后
是的灰瞻,到此,mini-css-extract-plugin
的基本使用就這么些了辅甥,要看更多的使用酝润,還是看官方介紹哈。
好了璃弄,繼續(xù)研究其他CSS相關(guān)的知識要销。rem
、postcss
夏块、sass
疏咐、less
、...