今天在使用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. java中的foreach用法及总结

    增强for(part1:part2){part3}; part2中是一个数组对象,或者是带有泛性的集合. part1定义了一个局部变量,这个局部变量的类型与part2中的对象元素的类型是一致的. pa ...

  2. SQL Server 页面查询超时(SOS_SCHEDULER_YIELD等待)

    一.问题概述 问题大概是这样的,有一个功能页面经常查询超时,有时候就算能查询出来也要很长的时间,但是有时又会很快.遇到的这种问题在排除掉网络原因之后基本上可以从查询语句上去找原因. 编译查询SQL语句 ...

  3. Netty的常用概念

    我们先来看一段代码: // Configure the server. EventLoopGroup bossGroup = new NioEventLoopGroup(1); EventLoopGr ...

  4. Mysql查询某字段值重复的数据

    查询user表中,user_name字段值重复的数据及重复次数 select user_name,count(*) as count from user group by user_name havi ...

  5. 关于Apache配置虚拟主机后在局域网中让其他电脑访问

    #-----------adxssp------------# NameVirtualHost *:80 <VirtualHost *:80> ServerName www.b.com D ...

  6. Java经典编程题50道之十六

    输出九九乘法表. public class Example16 {    public static void main(String[] args) {        table(9);    } ...

  7. LOJ6001 - 「网络流 24 题」太空飞行计划

    原题链接 Description 有个实验和个仪器,做实验有报酬买仪器有花费.每个实验都需要一些仪器,求最大净收益(实验报酬仪器花费),并输出一组方案. Solution 实验向所需仪器连边,实验的点 ...

  8. 使用TensorFlow的卷积神经网络识别自己的单个手写数字,填坑总结

    折腾了几天,爬了大大小小若干的坑,特记录如下.代码在最后面. 环境: Python3.6.4 + TensorFlow 1.5.1 + Win7 64位 + I5 3570 CPU 方法: 先用MNI ...

  9. Nginx 开启gzip压缩(图片,文件,css)

    1.Vim打开Nginx配置文件 vim /usr/local/nginx/conf/nginx.conf 2.找到如下一段,进行修改 gzip on; gzip_min_length 1k; gzi ...

  10. JAVA多线程与并发学习总结

    1.      计算机系统 使用高速缓存来作为内存与处理器之间的缓冲,将运算需要用到的数据复制到缓存中,让计算能快速进行:当运算结束后再从缓存同步回内存之中,这样处理器就无需等待缓慢的内存读写了. 缓 ...