var ExtractTextPlugin=require('extract-text-webpack-plugin');//build使用
{
test:/\.css$/,
use:ExtractTextPlugin.extract({
fallback:'style-loader',
use:'css-loader'
})
},
{
test:/\.scss$/,
loader:ExtractTextPlugin.extract({
fallback:'style-loader',
use:'css-loader!sass-loader'
})
},
    new ExtractTextPlugin({
filename:'[name].css',
disable:false,
allChunks:true
}),

  

  注:在css抽离的过程webpack-dev-server -d --inline --hot --env.dev ,scss写的文件不会热更新。所以build中再使用,开发过程中不适用,效果更佳~

在webpack4中改成了mini-css-extract-plugin,依然是build中使用

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

 rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader' },
{ loader: 'postcss-loader', options: { sourceMap: true } }
]
},
{
test: /\.s(c|a)ss$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader' },
{ loader: 'postcss-loader', options: { sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true } }
]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader' },
{ loader: 'postcss-loader', options: { sourceMap: true } },
{ loader: 'less-loader', options: { sourceMap: true } }
]
}
] new MiniCssExtractPlugin({
filename: 'style/[name]-[contenthash].css'
}),

  

 

extract-text-webpack-plugin---webpack插件的更多相关文章

  1. YYDS: Webpack Plugin开发

    目录 导读 一.cdn常规使用 二.开发一个webpack plugin 三.cdn优化插件实现 1.创建一个具名 JavaScript 函数(使用ES6的class实现) 2.在它的原型上定义 ap ...

  2. webpack之 plugin(插件)

    plugin plugin是插件的意思,通常用来对某个现有的架构就行拓展 webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等 loader和plugin区别 lo ...

  3. webpack进阶之插件篇

    一.插件篇 1. 自动补全css3前缀 autoprefixer 官方是这样说的:Parse CSS and add vendor prefixes to CSS rules using values ...

  4. 如何开发webpack plugin

    继上回介绍了如何开发webpack loader 之后.趁热打铁,来继续看下webpack另一个核心组成:plugin. 下面也和loader一样,让我们一起从基本的官方文档着手看起. loader和 ...

  5. 简单webpack plugin 开发

    重要是学习下怎么开发webpack plugin,同时记录下 插件模型 webpack 是一个插件,可以是javascript class ,或者具名 class 定义apply 方法 指定一个绑定到 ...

  6. 案例实战之如何写一个webpack plugin

    案例实战之如何写一个webpack plugin 1.写一个生成打包文件目录的file.md文件 // 生成一个目录项目目录的文件夹 class FileListPlugin { constructo ...

  7. 揭秘webpack plugin

    前言 Plugin(插件) 是 webpack 生态的的一个关键部分.它为社区提供了一种强大的方法来扩展 webpack 和开发 webpack 的编译过程.这篇文章将尝试探索 webpack plu ...

  8. webpack.optimize.CommonsChunkPlugin插件的使用

    方式一,传入字符串参数 new webpack.optimize.CommonsChunkPlugin('common.js'), // 默认会把所有入口节点的公共代码提取出来,生成一个common. ...

  9. webpack常用的插件安装命令

    webpack常用的插件安装命令:1:npm install html-webpack-plugin --save-dev //自动快速的帮我们生成HTML.2:npm install css-loa ...

  10. vue+webpack 安装常见插件

    html-webpack-plugin 插件地址:https://www.npmjs.com/package...安装指令: npm install html-webpack-plugin --sav ...

随机推荐

  1. HTTP状态码作用

    文章目录 状态码分类 常见的状态码 1xx消息 2xx成功 3xx重定向 4xx客户端错误 5xx服务器错误 HTTP状态码的作用是:web服务器用来告诉客户端,发生了什么事. 状态码位于HTTP R ...

  2. openstack-ocata-环境准备1

    Openstack环境准备1. 最少两台机器2. Controller:1核cpu 4G内存 5G硬盘3. Computer:1核cpu 2G内存 10G硬盘4. 至少两个网卡,本次采用四个网卡(1网 ...

  3. Oracle总结【视图、索引、事务、用户权限、批量操作】

    前言 在Oracle总结的第一篇中,我们已经总结了一些常用的SQL相关的知识点了...那么本篇主要总结关于Oralce视图.序列.事务的一些内容... 在数据库中,我们可以把各种的SQL语句分为四大类 ...

  4. PCI、CPCI、CPCIE 区别、特点

    PCI.CPCI.CPCIE 区别.特点 CPCI总线 •PCI总线作为处理器系统的局部总线,主要目的是为了连接外部设备,而不是作为处理器的系统总线连接Cache和主存储器 •(1) PCI总线空间与 ...

  5. mysql数据库常用数据类型

    1.整数:TINYINT.SMALLINT.MEDIUMINT.INT(INTEGER).BIGINT,比较常用的是INT,这五种类型只是取值范围不一样,具体的范围可以在mysql shell界面使用 ...

  6. JavaScript替换HTML标签

    JavaScript替换HTML标签 1.说明 获取HTML字符串(包含标签),通过正则表达式替换HTML标签,输出替换后的字符串 2.实现JavaScript代码 function deleteTa ...

  7. 如何让window.open()以post请求方式调用(巧妙解法)

    问题由来: 在公司遇到一个线上bug,如下 var url = 'http://106.75.31.215:8012/onlinePreview?url=' + encodeURIComponent( ...

  8. 异常-----freemarker.core.ParseException: Encountered

    1.错误描述 freemarker.core.ParseException: Encountered " " at line 14, column 12 in myself.ftl ...

  9. java线程安全问题以及使用synchronized解决线程安全问题的几种方式

    一.线程安全问题 1.产生原因 我们使用java多线程的时候,最让我们头疼的莫过于多线程引起的线程安全问题,那么线程安全问题到底是如何产生的呢?究其本质,是因为多条线程操作同一数据的过程中,破坏了数据 ...

  10. 【BZOJ2882】工艺(后缀自动机)

    [BZOJ2882]工艺(后缀自动机) 题面 BZOJ权限题,良心洛谷 题解 还是一样的,先把串在后面接一遍 然后构建\(SAM\) 直接按照字典序输出\(n\)次就行了 #include<io ...