extract-text-webpack-plugin用法
一 背景
最近在做一个项目,项目本身是用vue-cli创建的单页面应用,由于项目扩展需要创建多页面,所以需要对不同的html分别进行css文件打包。于是开始研究extract-text-webpack-plugin插件。
二 插件介绍
打包样式有两种方法,一种是使用style-loader自动将css代码放到生成的style标签中,并且插入到head标签里。另一种就是使用extract-text-webpack-plugin插件,将样式文件单独打包,打包输出的文件由配置文件中的output属性指定。然后我们在入口HTML页面写个link标签引入这个打包后的样式文件。
三 插件使用
1 插件安装:
# for webpack 3
npm install --save-dev extract-text-webpack-plugin
# for webpack 2
npm install --save-dev extract-text-webpack-plugin@2.1.2
# for webpack 1
npm install --save-dev extract-text-webpack-plugin@1.0.1
2 插件使用
在webpack.config.js中引入
const ExtractTextPlugin = require("extract-text-webpack-plugin");module.exports = {module: {rules: [{test: /\.css$/,use: ExtractTextPlugin.extract({fallback: "style-loader", // 编译后用什么loader来提取css文件use: "css-loader" // 指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader})}]},plugins: [new ExtractTextPlugin("styles.css"),]
}
四 API
new ExtractTextPlugin([id: string], filename: string, [options])
- id此插件实例的唯一标识。(仅限高级用法;默认情况下,自动生成)
- filename结果文件的文件名。可能包含[name],[id]和[contenthash]。
[name] 块的名称
[id] 块的标识
[contenthash] 提取文件内容的哈希值 - options
- allChunks 从所有其他块中提取(默认情况下,它仅从初始块中提取)
- disable 禁用插件
ExtractTextPlugin.extract([notExtractLoader], loader, [options]
从现有加载器创建提取加载器。
- notExtractLoader(可选)在未提取css时应使用的加载程序(即在其他块中时allChunks: false)
- loader 应该用于将资源转换为css导出模块的加载器。
- options
publicPath覆盖publicPath此加载程序的设置。
五 扩展
该实例其实还有一个扩展函数。如果你有多个ExtractTextPlugin,你应该使用它。
let ExtractTextPlugin = require('extract-text-webpack-plugin');// multiple extract instances
let extractCSS = new ExtractTextPlugin('stylesheets/[name].css');
let extractLESS = new ExtractTextPlugin('stylesheets/[name].less');module.exports = {...module: {loaders: [{test: /\.scss$/i, loader: extractCSS.extract(['css','sass'])},{test: /\.less$/i, loader: extractLESS.extract(['css','less'])},...]},plugins: [extractCSS,extractLESS]
};
extract-text-webpack-plugin用法相关推荐
- Webpack之插件html webpack plugin
Webpack之插件html webpack plugin html-webpack-plugin插件 动态生成html文件并自动引入js文件 静态文件无需加载js或css文件,通过设置入口文件可以将 ...
- 【已解决】Html Webpack Plugin Error;html-withimg-loader无法正常解析html内的img
升级webpack之后发现原本之前用的好好的配置报错了: 控制台报错: ERROR in Error: Parse Error: <img src={"default":&q ...
- webpack:进阶用法(一)
一.PostCSS插件自动补齐CSS3前缀 1.1 背景 CSS3属性为什么有前缀?因为浏览器标准没有统一. 比如下面,写起来很慢,低效,麻烦. .box {-moz-border-radius: 1 ...
- Excel获取指定数字格式文本——TEXT函数及其用法
目录 1.TEXT函数的语法及作用 (1)语法:TEXT(value,format_text) 即TEXT(值,数字格式) (2)作用:将数值转换为指定数字格式表示的文本. 2.TEXT用法及实例 ( ...
- python Tkinter Text的简单用法
1.设置python Tkinter Text控件文本的方法 text.insert(index,string) index = x.y的形式,x表示行,y表示列 向第一行插入数据,text.ins ...
- webpack Plugin常用 optimization splitChunks UglifyJsPlugin sourceMap
很多东西容易忘记,做个简单笔记 1.webpack loader 加载顺序 从后到前 例子 ['style-loader', 'css-loader','sass-loader'] 先sass最后st ...
- Sublime Text 2 快捷键用法大全
Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑) Ctrl+G 跳转到相应的行 Ctrl+J 合并行(已选择需要合并的多行时) Ctrl+L 选择整行(按住-继续 ...
- Sublime Text 2 快捷键用法大全(转)
Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑) Ctrl+G 跳转到相应的行 Ctrl+J 合并行(已选择需要合并的多行时) Ctrl+L 选择整行(按住-继续 ...
- matlab中text竖着写,科学网—matlab中text函数的用法 - 张瑞龙的博文
text(x,y,'string')在图形中指定的位置(x,y)上显示字符串string. text(x,y,z,'string'.'PropertyName',PropertyValue„)对引号中 ...
- extract函数python_extract的用法详解
extract 函数从数组中将变量导入到当前的符号表. 该函数使用数组键名作为变量名,使用数组键值作为变量值.针对数组中的每个元素,将在当前符号表中创建对应的一个变量. 第二个参数 type 用于指定 ...
最新文章
- datafactory生成mysql数据_测试数据生成工具DataFactory的使用
- C语言 游戏远程call调用,C++远程调用类操作支持CallbackInterface(1)
- CommonLang3中的StringUtils最全解析
- windowbuilder点击按钮出现新界面_掌握这几招,轻松设计出高点击率的行为召唤按钮...
- java map 不存在的key_java – HashMap表示即使它确实存在,Key也不存在
- typra修改快捷键
- CString的成员函数用法大全
- SQL-SERVER2008登录错误233
- 剑指offer——面试题38:数字在排序数组中出现的次数
- php二分查找法实例
- 漫话:如何给女朋友解释什么是RPC
- PISCES P4-vSwitch 安装以及一次失败的测试
- vue 项目中使用 评论功能 带emoji表情包
- 学会放松和享受当下极其重要
- Linux基础命令---lp打印文件
- 素数算法,看看电脑是怎么找素数的
- SEO高工资,你需要掌握什么能力?
- java数组和字符串相互转换
- 如何批量重命名多张图片
- 監獄脱出少女 Lie
热门文章
- 计算机上配置的网卡实际上是,()计算机上配置的网卡,实质上是_ ___。
- android p preview_细数 Android P 开发者预览版中最不能错过的新特性
- 隐藏与显现_原神:芭芭拉的隐藏彩蛋你知道吗?对着游戏npc用技能就可显现
- mysql root账号_修改mysql root账号密码
- oracle包同义词报错,Oracle——04同义词与数据库链接
- key php 转小写_php字符串替换以及大写字母转小写字母
- iframe给php传值,向iframe传递参数
- android 滑动翻转动画,Android编程实现3D滑动旋转效果的方法
- python 系统编程
- MySQL String Types