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. ASI通讯协议——ASI2x1

    通讯协议--ASI2x1 基本功能描述 计算机或控制器通过以太网口或者RS232接口发出指令,包括查询指令,切换指令等,主机箱中的控制板在收到这些指令之后,将这些数据通过485总线转发给对应的主板,并 ...

  2. Srtuts2实现登录界面(不连接数据库)报错(一)

    二月 28, 2014 11:32:02 下午 org.apache.catalina.core.AprLifecycleListener init 严重: An incompatible versi ...

  3. Excel 2010高级应用-面积图(三)

    Excel 2010高级应用-面积图(三) 操作过程如下: 1.新建Excel空白文档,重新命名为面积图 2.单击"插入",找到面积图图样 3.选择其中一种类型的面积图,单击并在空 ...

  4. TypeError: Error #1034: 强制转换类型失败:无法将 mx.controls::DataGrid@9a7c0a1 转换为 spark.core.IViewport。

    1.错误描述 TypeError: Error #1034: 强制转换类型失败:无法将 mx.controls::DataGrid@9aa90a1 转换为 spark.core.IViewport. ...

  5. 未能从程序集“mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089”中加载类型“System.Runtime.CompilerServices.TuppressIldasmAttribute”。已解决

    "/"应用程序中的服务器错误. 未能从程序集"mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77 ...

  6. 【洛谷1855】 榨取kkksc03

    题面 前面省去一堆背景内容 洛谷的运营组决定,如果一名oier向他的教练推荐洛谷,并能够成功的使用(成功使用的定义是:该团队有20个或以上的成员,上传10道以上的私有题目,布置过一次作业并成功举办过一 ...

  7. (jzoj snow的追寻)线段树维护树的直径

    jzoj snow的追寻 DFS序上搞 合并暴力和,记录最长链和当前最远点,距离跑LCA # include <stdio.h> # include <stdlib.h> # ...

  8. MySQL系列-第一章节:MySQL介绍与安装

    1.数据库介绍 1.1.什么是数据库`<Database>` 简单说存放数据的仓库,这个仓库按照一定的数据结构<数据结构是指数据的组织形式或数据之间的联系>来组织.存储的,我们 ...

  9. Django Middleware简介

    1      前言 Django使用非常熟练了,各种API接口不在话下,全都搞定.为方便定位问题在每个API接口的的开始和返回的地方都加上了log打印,记录入参和返回值. 但是这样有一个问题,需要每个 ...

  10. 【Spring源码分析】Bean加载流程概览

    代码入口 之前写文章都会啰啰嗦嗦一大堆再开始,进入[Spring源码分析]这个板块就直接切入正题了. 很多朋友可能想看Spring源码,但是不知道应当如何入手去看,这个可以理解:Java开发者通常从事 ...