extract-text-webpack-plugin用法

news/2025/2/12 19:32:13

一 背景
最近在做一个项目,项目本身是用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])

  1. id此插件实例的唯一标识。(仅限高级用法;默认情况下,自动生成)
  2. filename结果文件的文件名。可能包含[name],[id]和[contenthash]。
    [name] 块的名称
    [id] 块的标识
    [contenthash] 提取文件内容的哈希值
  3. options
  • allChunks 从所有其他块中提取(默认情况下,它仅从初始块中提取)
  • disable 禁用插件

ExtractTextPlugin.extract([notExtractLoader], loader, [options]
从现有加载器创建提取加载器。

  1. notExtractLoader(可选)在未提取css时应使用的加载程序(即在其他块中时allChunks: false)
  2. loader 应该用于将资源转换为css导出模块的加载器。
  3. 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]
};

https://dhexx.cn/news/show-1546587.html

相关文章

Linux如何修改env看到的环境变量? .bashrc和.bash_profile区别

一、首先了解一下set、env、export的区别: set 显示当前shell的变量,包括当前用户的变量 env 显示当前用户的变量 export 显示当前导出成用户变量的shell变量 每个shell有自己特有的变量(set)显示的变量,这个和用户变…

Python基础语句练习

运算符: - * / // %脚本要求:编写用户登录认证,用户名密码正确则登陆成功,反之则失败并警告重试值user "patwang"password "123123"for i in range(3): users input("You type in the user:…

[洛谷P3674]小清新人渣的本愿

题目传送门 这道题是一道莫队题。对于每一种问法,就是查询对应的数是否在当前的区间内。 设$b[i]$表示莫队当前区间中有没有$i$这个数。 对于第一问“是否可以选出两个数它们的差为x”,也就是判断当$i-jx$时是否存在$b[i],b[j]1$。变形一下发现$ijx$&…

nginx状态模块详解及实战

nginx status介绍nginx软件的功能模块中有一个ngx_http_stub_status_module模块,这个模块的主要功能是记录nginx的基本访问状态信息,让使用者了解nginx的工作状态,例如:连接数等信息。要想使用状态模块,在编译nginx时必…

windows下的host文件在哪里,有什么作用?

在Window系统中有个Hosts文件(没有后缀名),在Windows98系统下该文件在Windows目录,在Windows2000/XP系统中位于C:\Winnt\System32\Drivers\Etc 目录中。WIN7(C:\Windows\System32\drivers\etc)该文件其实是一个纯文本的文件&#…

Selenium Grid简介与安装

一、序: 很多敏捷团队已经使用了Selenium和Watir等 工具进行验收测试或用户接口测试。这些工具通过驱动Web浏览器的方式反映用户体验,并且为测试那些使用DHTML和Ajax构建的动态接口提供强力支 持。然而,随着更多的团队采纳类似的工具&#xf…

JavaScript隐式类型转换

基本数据类型 ECMAScript 一共定义了七种 build-in types,其中六种为 Primitive Value,Null, Undefined,String, Number, Boolean, Symbol。而最后一种 Object build-in type 与通常意义上的 Ja…

C 语言

2019独角兽企业重金招聘Python工程师标准>>> #include <stdio.h> #include <sys/types.h> #include <fcntl.h> #include <unistd.h>typedef struct Hello {int a; } Hello;int main(){Hello *h;Hello ha;ha.a 1234;h &ha;int fd ope…

Selenium Grid使用与探索

一、启动Grid&#xff0c;顺序执行测试案例&#xff1a; 进入到Selenium Grid的根目录&#xff0c; ant launch-hub。启动Hub服务。运行后查看http://localhost:4444/console &#xff0c;检查Hub服务是否启动成功。 Hub启动成功后&#xff0c;首先来试运行一下&#xff0c;在…

如何将视频分割成几部分 视频剪切软件哪个好

视频已经成为继文字&#xff0c;图片后的又一个交流方式&#xff0c;在这个快节奏的发展时代&#xff0c;很多人看到文字就会头疼&#xff0c;转而通过视频来获取外界传递的信息&#xff0c;尤其是短视频以及影视的发展&#xff0c;对于很多女生来说&#xff0c;大概在追剧的过…