这个参加可以压缩CSS,然后让CSS输出到指定的目录中

使用这个loader也很简单,只有将style-loader 替换成 MiniCssExtractPlugin.loader, 'css-loader


  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
{
test: /\.(css|less)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
}

还需要在插件中实例化

new MiniCssExtractPlugin({
filename: 'style/style.css'
})

路径是你需要输出的文件

【webpack】中mini-css-extract-plugin使用方法的更多相关文章

  1. webpack中,css中打包背景图,路径报错

    css-loader: //打包样式中背景图 { test: /\.(png|jpg)$/, loader: "url-loader?limit=8192&name=images/[ ...

  2. HTML中引用CSS的几种方法

    HTML中引用CSS的方法主要有 行内样式 内嵌式 链接式 导入样式 行内样式 指写在标签里的Style元素的值 <p style="color: #FF0000;"> ...

  3. Webpack 2 视频教程 012 - 理解Webpack 中的 CSS 作用域与 CSS Modules

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  4. webpack 中,loader、plugin 的区别

    loader 和 plugin 的主要区别: loader 用于加载某些资源文件. 因为 webpack 只能理解 JavaScript 和 JSON 文件,对于其他资源例如 css,图片,或者其他的 ...

  5. (4)webpack中配置css,scss,less第三方loader

    为什么要使用第三方loader 一般引入样式文件,我们会在html中引入样式标签. 很明显,这样就跟之前在script中引入js文件一样,会导致二次请求.我们希望webpack像处理js文件一样处理样 ...

  6. JSX中引用CSS的一种方法

    第一步:在page或者pages目录下新建一个css文件,例如style.css: 第二步:在jsx页面中import该css文件,例如: import style from './style.css ...

  7. webpack中如何编写一个plugin

    loader和plugin有什么区别呢?什么是loader,什么是plugin. 当我们在源代码里面去引入一个新的js文件或者一个其他格式的文件的时候,这个时候,我们可以借助loader去帮我们处理引 ...

  8. html中插入css的4种方法

    #1:链入外部样式表 <head> <link href="mystyle.css" rel="stylesheet" type=" ...

  9. HTML文档中应用css样式的方法总结

    在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表:2.使用style元素包含样式表:3.使用style属性,即内联样式 一.link标签链接外部样式表 先看一条较为标准的l ...

  10. 在html中引入css、js和jQuery的方法

    在html中引入css代码 在html中插入CSS样式表的方法有三种: 1.外部样式表(External style sheet):即所有的样式单独写在一个.css文件中,在html文件的head部分 ...

随机推荐

  1. 距离放弃python又近了一大步,而然只是第四天

    今天是周末后的第一天,周末四处浪浪浪,所以在周一的时候就要狠狠的复习之前的东西了,之后从第一天的计算机基础开始复习,具体内容请翻阅前三篇随笔,主要是要仔细看看,怕学了后面的忘了前面的,今天引进的第一个 ...

  2. VMware Workstation中安装linux系统(CentOS)超详细(部分转载)

    首先准备一下VMware虚拟机和linux镜像文件,链接如下: 对于32位windows机子安装的是10.0.7版本的VMware Workstation,链接: https://pan.baidu. ...

  3. TensorRT&Sample&Python[network_api_pytorch_mnist]

    本文是基于TensorRT 5.0.2基础上,关于其内部的network_api_pytorch_mnist例子的分析和介绍. 本例子直接基于pytorch进行训练,然后直接导出权重值为字典,此时并未 ...

  4. iOS开发基础-九宫格坐标(6)

    继续对iOS开发基础-九宫格坐标(5)中的代码进行优化. 优化思路:把字典转模型部分的数据处理操作也拿到模型类中去实现,即将 ViewController 类实现中 apps 方法搬到 WJQAppI ...

  5. 在Bootstrap开发框架中使用bootstrap-datepicker插件

    在基于Boostrap的Web开发中,往往需要录入日期内容,基于Boostrap的插件中,关于日期的录入可以使用bootstrap-datepicker这个非常不错的插件,以替代默认的type=dat ...

  6. 玩转3D Swiper美女性感秀之思路分析总结

    前言 继一次的3D魔方之后,这次利用CSS3的transform.translate.rotate.preserve-3d等结合JS的requestAnimationFrame.class带你一起玩转 ...

  7. Python Revisited Day 13 (正则表达式)

    目录 13.1 Python的正则表达式语言 13.1.1 字符与字符类 13.1.2 量词 {m, n} ? + * 组与捕获 ?:可以关闭捕获 断言与标记 13.2 正则表达式模块 正则表达式模块 ...

  8. JS 数组去重的几种方式

    JS 常见的几种数组去重方法 一.最简单方法(indexOf 方法) 实现思路:新建一个数组,遍历要去重的数组,当值不在新数组的时候(indexOf 为 -1)就加入该新数组中: function u ...

  9. System.nanoTime与System.currentTimeMillis的区别(转)

    原文地址:http://blog.csdn.net/dliyuedong/article/details/8806868 平时产生随机数时我们经常拿时间做种子,比如用System.currentTim ...

  10. 《构建之法》课程进度之Github、Travis等工具融入篇

    <构建之法>里有一个16周的软件工程课程进度设计.本文在该基本设计的基础上,围绕github.com(源码管理).travis-ci.org(持续集成).单元测试工具.日志工具.少数实用U ...