今天在使用webpack的extract-text-webpack-plugin插件提取单独打包css文件时,报错,说是这个插件要依赖webpack3的版本。

后面查了一下,webpack4得使用mini-css-extract-plugin这个插件来单独打包css。

mini-css-extract-plugin这个插件的用法如下:

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

const config = module.exports={

  plugins: [

        new MiniCssExtractPlugin({
        filename: "[name].[chunkhash:8].css",
        chunkFilename: "[id].css"
      })
    ],
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
              MiniCssExtractPlugin.loader,
              "css-loader"
          ]
        }
      ]
    }

}

module.exports = config

(学习笔记)

mini-css-extract-plugin 的用法(webpack4)的更多相关文章

  1. [Vue CLI 3] 配置解析之 css.extract

    大家还记得我们在老版本中,对于线上环境配置中会把所有的 css 多打成一个文件: 核心是使用了插件 extract-text-webpack-plugin,方式如下: 第一步都是加载插件 const ...

  2. 一个CSS中Z-index的用法

    一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性     大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...

  3. CSS预处理器之SASS用法指南

    CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...

  4. CSS选择器的新用法

    前面的话 现在,预处理器(如sass)似乎已经成为开发CSS的标配,正如几年前jQuery是开发JS的标配一样.JS的querySelector借鉴了jQuery的选择器思想,CSS选择器也借鉴了预处 ...

  5. css before after基本用法【转】

    <HTML><HEAD> <meta http-equiv="content-Type"content="text/html;charset ...

  6. CSS学习笔记(9)--详解CSS中:nth-child的用法

    详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...

  7. css和@import区别用法

    css和@import都是调用外部样式表的方法. 一.用法 (1)link: <link rel="stylesheet" type="text/css" ...

  8. 详解CSS中:nth-child的用法

    前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实例来给大家讲解:nth-child的实际 ...

  9. css的定义、用法、注释、命名规则、书写规范

    什么是css: css全名是层叠样式表(Cascading Style Sheets) CSS的作用:给html标签添加"样式",样式定义了如何显示 HTML 元素 标签是可以由自 ...

  10. css 兼容ie8 rgba()用法

    今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到 ...

随机推荐

  1. CentOS 7 安装Maven

    Maven的下载地址是:http://maven.apache.org/download.cgi 安装Maven非常简单,只需要将下载的压缩文件解压就可以了. cd /data wget http:/ ...

  2. Gitlab的安装与实践

    tucao 先让我来吐槽一下下,使用GitHub以及Bitbucket比较不太稳定,尤其是后者,可以说是极其不稳定,甚至无法克隆仓库到本地.因此,决定安装一款开源且免费的Git服务到自己的服务器主机上 ...

  3. Discuz的安装与使用

    Discuz的安装与使用 一.Discuz的安装 由于本机已经安装好XAMPP集成工具,后续Discuz访问数据库以及服务器等都是基于XAMPP环境.在主机localhost根目录下新建bbs文件夹. ...

  4. appium+Python 启动app(二)

    我们上步操作基本完成,下面介绍编写Python脚本启动app 打开我们pycharm新建.py文件 第一步:输入Python脚本代码: #coding=utf-8 from appium import ...

  5. C++11 左值、右值、右值引用详解

    C++11 左值.右值.右值引用详解 左值.右值 在C++11中所有的值必属于左值.右值两者之一,右值又可以细分为纯右值.将亡值. 在C++11中可以取地址的.有名字的就是左值,反之,不能取地址的.没 ...

  6. java遍历的优化

    说明:这是在面试中面试官出的题.虽然是常见的优化问题,但这种经验的确很有用.感慨之余,分享出来,以此共勉. 场景:现有List<PersonA>,List<PersonB>,P ...

  7. 为什么使用正则test( )第一次是 true,第二次是false?

    今天朋友问我一个问题,我现在需要多次匹配同一个内容,但是为什么我第一次匹配,直接是 true,而第二次匹配确实 false 呢? var s1 = "MRLP"; var s2 = ...

  8. shell 批量创建带随机字符串的html文件

    思路一: echo $RANDOM|md5sum |tr "[0-9]" "[a-j]"|cut -c 2-11 RANDOM:  linux内置的随机数变量 ...

  9. linux 搭建CA服务器 http+ssl mail+ssl 扫描与抓包

    搭建CA服务器 CA服务是给服务器发放数字证书,被通信双方信任,独立的第三方机构 国内常见的CA机构 中国金融认证中心(CFCA) 中国电信安全认证中心(CTCA) 北京数字证书认证中心(BJCA) ...

  10. AutoMapper 使用心得

    在很久之前就已经有了解到AutoMapper 这一个组件了,但是却一直不明白这个东西要怎么使用,是用来干什么的.经过几经周折之后,看了资料大概5.6次吧,总算理解其中的用途和原理(请原谅我理解能力太差 ...