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. SQL Server 批量插入

    使用场景 在项目中,涉及到数据库表变更时,可能会需要将一个或多个表中的数据迁移到另一个表中. 这时用sql去执行会很方便! sql语句 //SQL批量插入 create table #ttableNa ...

  2. LVDS/DVI/HDMI Interface

    数字视频信号 以SXGA为例,其时序如下: 垂直:         水平: 图中DSPTMG为使能信号,VSYNC为场同步信号,HSYNC为行同步信号.在行场的消隐期(T1与T7),DSPTMG为低电 ...

  3. 常用u-boot命令详解(全) 2

    (8) USB 操作指令 指令 功能 usb reset 初始化USB控制器 usb stop [f] 关闭USB控制器 usb tree 已连接的USB设备树 usb info [dev] 显示US ...

  4. vxWorks驱动架构

    Vxworks内核驱动基本结构: 三张表:1. 系统设备表  2. 系统驱动表 3. 文件描述符表     Vxworks 内部对每个设备使用DEV_HDR 数据结构进行表示: Typedef str ...

  5. MySQL查看最大连接数和修改最大连接数

    MySQL查看最大连接数和修改最大连接数 1.查看最大连接数       show variables like '%max_connections%'; 2.修改最大连接数       set GL ...

  6. (十四)java中super和this

    super代表的是父类.超类,用在继承中的子类中:this代表对象本身,用在本类中.     super访问的是被子类隐藏的父类的属性或被覆盖的方法,而this访问的是同一类中的成员.     sup ...

  7. web开发性能优化---UI界面篇

    1.尽量采用div+css布局 DIV+CSS相比较与表格布局的优势: a.代码精简 使用DIV+CSS布局,页面代码精简,这一点对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高 ...

  8. canvas动画:自由落体运动

    经过前面的文章,我们已经能够在canvas画布上画出各种炫酷的图形和画面,但是这些画面都是禁止的,怎么样才能让他们动起来呢? 如何绘制基本图形可以参考:canvas基本图形绘制 如何对基本图形移动旋转 ...

  9. LAMP应用部署

    LAMP+wordpress 部署博客 软件安装 yum -y install httpd yum -y install php yum -y install php-mysql yum -y ins ...

  10. ajax就收data的参数

    一,变量 "data": ${cityData},//数据(必传) 二,json data:{"state":"Front"},