extract-text-webpack-plugin---webpack插件
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插件的更多相关文章
- YYDS: Webpack Plugin开发
目录 导读 一.cdn常规使用 二.开发一个webpack plugin 三.cdn优化插件实现 1.创建一个具名 JavaScript 函数(使用ES6的class实现) 2.在它的原型上定义 ap ...
- webpack之 plugin(插件)
plugin plugin是插件的意思,通常用来对某个现有的架构就行拓展 webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等 loader和plugin区别 lo ...
- webpack进阶之插件篇
一.插件篇 1. 自动补全css3前缀 autoprefixer 官方是这样说的:Parse CSS and add vendor prefixes to CSS rules using values ...
- 如何开发webpack plugin
继上回介绍了如何开发webpack loader 之后.趁热打铁,来继续看下webpack另一个核心组成:plugin. 下面也和loader一样,让我们一起从基本的官方文档着手看起. loader和 ...
- 简单webpack plugin 开发
重要是学习下怎么开发webpack plugin,同时记录下 插件模型 webpack 是一个插件,可以是javascript class ,或者具名 class 定义apply 方法 指定一个绑定到 ...
- 案例实战之如何写一个webpack plugin
案例实战之如何写一个webpack plugin 1.写一个生成打包文件目录的file.md文件 // 生成一个目录项目目录的文件夹 class FileListPlugin { constructo ...
- 揭秘webpack plugin
前言 Plugin(插件) 是 webpack 生态的的一个关键部分.它为社区提供了一种强大的方法来扩展 webpack 和开发 webpack 的编译过程.这篇文章将尝试探索 webpack plu ...
- webpack.optimize.CommonsChunkPlugin插件的使用
方式一,传入字符串参数 new webpack.optimize.CommonsChunkPlugin('common.js'), // 默认会把所有入口节点的公共代码提取出来,生成一个common. ...
- webpack常用的插件安装命令
webpack常用的插件安装命令:1:npm install html-webpack-plugin --save-dev //自动快速的帮我们生成HTML.2:npm install css-loa ...
- vue+webpack 安装常见插件
html-webpack-plugin 插件地址:https://www.npmjs.com/package...安装指令: npm install html-webpack-plugin --sav ...
随机推荐
- HTTP状态码作用
文章目录 状态码分类 常见的状态码 1xx消息 2xx成功 3xx重定向 4xx客户端错误 5xx服务器错误 HTTP状态码的作用是:web服务器用来告诉客户端,发生了什么事. 状态码位于HTTP R ...
- openstack-ocata-环境准备1
Openstack环境准备1. 最少两台机器2. Controller:1核cpu 4G内存 5G硬盘3. Computer:1核cpu 2G内存 10G硬盘4. 至少两个网卡,本次采用四个网卡(1网 ...
- Oracle总结【视图、索引、事务、用户权限、批量操作】
前言 在Oracle总结的第一篇中,我们已经总结了一些常用的SQL相关的知识点了...那么本篇主要总结关于Oralce视图.序列.事务的一些内容... 在数据库中,我们可以把各种的SQL语句分为四大类 ...
- PCI、CPCI、CPCIE 区别、特点
PCI.CPCI.CPCIE 区别.特点 CPCI总线 •PCI总线作为处理器系统的局部总线,主要目的是为了连接外部设备,而不是作为处理器的系统总线连接Cache和主存储器 •(1) PCI总线空间与 ...
- mysql数据库常用数据类型
1.整数:TINYINT.SMALLINT.MEDIUMINT.INT(INTEGER).BIGINT,比较常用的是INT,这五种类型只是取值范围不一样,具体的范围可以在mysql shell界面使用 ...
- JavaScript替换HTML标签
JavaScript替换HTML标签 1.说明 获取HTML字符串(包含标签),通过正则表达式替换HTML标签,输出替换后的字符串 2.实现JavaScript代码 function deleteTa ...
- 如何让window.open()以post请求方式调用(巧妙解法)
问题由来: 在公司遇到一个线上bug,如下 var url = 'http://106.75.31.215:8012/onlinePreview?url=' + encodeURIComponent( ...
- 异常-----freemarker.core.ParseException: Encountered
1.错误描述 freemarker.core.ParseException: Encountered " " at line 14, column 12 in myself.ftl ...
- java线程安全问题以及使用synchronized解决线程安全问题的几种方式
一.线程安全问题 1.产生原因 我们使用java多线程的时候,最让我们头疼的莫过于多线程引起的线程安全问题,那么线程安全问题到底是如何产生的呢?究其本质,是因为多条线程操作同一数据的过程中,破坏了数据 ...
- 【BZOJ2882】工艺(后缀自动机)
[BZOJ2882]工艺(后缀自动机) 题面 BZOJ权限题,良心洛谷 题解 还是一样的,先把串在后面接一遍 然后构建\(SAM\) 直接按照字典序输出\(n\)次就行了 #include<io ...