使用 “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-pluginmini-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>

通过extract-text-webpack-plugin插件

在这里,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插件,这个是官方推荐的。

通过mini-css-extract-plugin插件

mini-css-extract-plugin插件也是用来提取css到单独的文件的,该插件有个前提条件,只能用于webpack 4及以上的版本,所以如果使用的webpack版本低于4,,那还是用回extract-text-webpack-plugin插件。

直接来吧,优点啥的,自己上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"
              ]
            }
        ]
    }
}

这里还是要提醒一下,如果只有一个入口filename写不写硬编码都没关系,因为就只有一个入口,但如果有多个入口,那就不能使用硬编码了,不然后面入口生成的css文件会覆盖前面生成的。这是我之前在extract-text-webpack-plugin踩过的坑。

三、最后

是的,到此,mini-css-extract-plugin的基本使用就这么些了,要看更多的使用,还是看官方介绍哈。

好了,继续研究其他CSS相关的知识。rempostcsssassless、...

转载于:https://www.cnblogs.com/xieqian/p/10196977.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值