使用 “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>
通过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相关的知识。rem
、postcss
、sass
、less
、...
使用 “mini-css-extract-plugin” 提取css到单独的文件的更多相关文章
- DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead extract-text-webpack-plugin 提取css报错
深入浅出Webpack 1-5 使用pulugin extract-text-webpack-plugin 提取css报错 DeprecationWarning: Tapable.plugin is ...
- webpack4对第三方库css,项目全局css和vue内联css文件提取到单独的文件(二十二)
在讲解提取css之前,我们先看下项目的架构如下结构: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有 ...
- vue服务端渲染提取css
vue服务端渲染,提取css单独打包的好处就不说了,在这里主要说的是抽取css的方法 要从 *.vue 文件中提取 CSS,可以使用 vue-loader 的 extractCSS 选项(需要 vue ...
- [Vue CLI 3] 配置解析之 css.extract
大家还记得我们在老版本中,对于线上环境配置中会把所有的 css 多打成一个文件: 核心是使用了插件 extract-text-webpack-plugin,方式如下: 第一步都是加载插件 const ...
- webpack 提取css成单独文件
webpack 提取css成单独文件 // 用来拼接绝对路径的方法 const {resolve} = require('path') const HtmlWebpackPlugin = requir ...
- webpack css打包为一个css
1.安装 npm install extract-text-webpack-plugin --save-dev 2.项目目录: index文件夹下的index.css: body{ backgroun ...
- 【html、CSS、javascript-5】css应用场景补充
一.CSS全局应用 父标签div下包含两个子标签div,当子标签dvi全部向左float,此时父标签设置的背景色是不显示的 <!DOCTYPE html> <html lang=&q ...
- HTML 网页开发、CSS 基础语法——十.CSS语法
CSS代码书写位置 • CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明 1.内联式 ① 内联式简介 •内联式,也被习惯叫做行内式. •书写位置:在 HTML 标签之上的 style 属性 ...
- 前端开发css实战:使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
随机推荐
- An internal error occurred during: Initializing Java Tooling.
详细错误信息: An internal error occurred during: "Initializing Java Tooling". java.lang.NullPoin ...
- 利用Python爬取网页图片
最近几天,研究了一下一直很好奇的爬虫算法.这里写一下最近几天的点点心得.下面进入正文: 你可能需要的工作环境: Python 3.6官网下载 我们这里以sogou作为爬取的对象. 首先我们进入搜狗图片 ...
- nextInt()和nextLine()一起使用时的注意点
问题原因:nextLine()会把nextInt(),next(),nextDouble(),nextFloat()的结束换行符作为字符串读入,进而不需要从键盘输入字符串nextLine便已经转向了下 ...
- django项目外部的脚本文件执行ORM操作,无需配置路由、视图启动django服务
#一.将脚本路径添加到python的sys系统环境变量里 import sys # sys.path.append('c:/Users/Administrator/www/mymac') #第一种.绝 ...
- photoshop出现错误:要求96和8之间的整数。已插入最接近的数值
win10升级后出现该问题.我用的是ps cc2014 解决办法:修改注册表 计算机\HKEY_CURRENT_USER\Software\Adobe\Photoshop\80 新建的是DWORD(3 ...
- 原生sql整理
mysql -uroot -p #登录mysql命令password: #输入密码 mysql> #每条mysql命令后面都要加分号结尾show databases; #打印整个mysql数据库 ...
- gitlab搭建和使用
原文地址:https://blog.csdn.net/zhushuai662/article/details/79581377 大家常听说Git.Github.Gitlab,很多人对着三个词很懵逼,分 ...
- 02——Solr学习之Solr安装与配置(linux上的安装)
借鉴博客:https://www.jianshu.com/p/1100f54fcbd8 https://www.cnblogs.com/jepson6669/p/9134652.html 1.准备一个 ...
- list遍历时删除的坑
1.测试代码如下: public class StrTest { public static void main(String[] args) { ArrayList<String> li ...
- npm link & unlink
npm link & unlink https://dev.to/erinbush/npm-linking-and-unlinking-2h1g