这个参加可以压缩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. Configuring Apache Kafka Security

    This topic describes additional steps you can take to ensure the safety and integrity of your data s ...

  2. loadrunner迭代和并发的区别

    转载: ZEE的回答: 用比喻的方式来回一下: 四车道的马路,如果只有四辆车并排走过就是并发: 如果四辆车排成一纵队走过就是迭代: 如果有100辆车排成25行依次走过就是并发加迭代. 在以上说法中,只 ...

  3. (十一)Updating Documents

    In addition to being able to index and replace documents, we can also update documents. Note though ...

  4. html基础和CSS选择器

    一.html简单基础 什么是HTML HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言,而是一种标 ...

  5. Elasticsearch通关教程(一): 基础入门

    简介 Elasticsearch是一个高度可扩展的.开源的.基于 Lucene 的全文搜索和分析引擎.它允许您快速,近实时地存储,搜索和分析大量数据,并支持多租户. Elasticsearch也使用J ...

  6. HashMap 与 Hashtable 的区别

    Hashtable t 小写 二者用法一致   都实现Map接口 1.HashMap 的键值可以为null,而Hashtable不允许("null" 不是 null 前者是字符串 ...

  7. Asp.Net core 视图组件ViewComponent

    视图组件 ViewComponent 最近用了一下视图组件,还挺方便的,如果遇到公共的部分,可以抽出来,写成视图组件,方便调用 先上图看一下效果:比如首页的4个画红框的地方是4个模块,有些地方可能要重 ...

  8. [模板] 后缀自动机&&后缀树

    后缀自动机 后缀自动机是一种确定性有限状态自动机, 它可以接收字符串\(s\)的所有后缀. 构造, 性质 翻译自毛子俄罗斯神仙的博客, 讲的很好 后缀自动机详解 - DZYO的博客 - CSDN博客 ...

  9. vue中@contextmenu在pc和mac中的区别

    项目中有用到右键菜单,故用了@contextmenu,由于本人是用的PC电脑,所以一切正常, 但是有同事用mac测试了一下,问题随之而来,MAC上右键按下就触发了, PC上面是鼠标抬起才会触发,所以这 ...

  10. linux服务端日志中截取自己所需要的部分

    近期开发一个图片处理的业务,涉及base64字符串解析的问题,为方便与友商间接口调试,日志中保存Base64.日,想想就肝儿疼,记录下来容易,取的时候难.为准确提取,配合两条命令即可. 1.获取日志所 ...