博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
extract-text-webpack-plugin用法
阅读量:6231 次
发布时间:2019-06-22

本文共 1931 字,大约阅读时间需要 6 分钟。

一 背景

最近在做一个项目,项目本身是用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 instanceslet 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  ]};

转载地址:http://zfhna.baihongyu.com/

你可能感兴趣的文章
阿里巴巴测试环境稳定性提升实践
查看>>
websocket搭建简单的网页聊天室框架【续1】
查看>>
Scrapy Shell
查看>>
array_merge和+号合并数组的区别
查看>>
TP5整合 WorkerMan 以及 GatewayWorker
查看>>
Facebook Docusaurus 中文文档 准备网站
查看>>
如何绘制一个圆圆的loading圈
查看>>
Nodejs学习记录:用koa.js开发微信公众号
查看>>
Android源码集锦,悬浮窗综合资讯类APP动画效果左右切换效果美妆领域
查看>>
Spring Cloud(六)服务网关 zuul 快速入门
查看>>
d3.js中动态数据的请求、处理及使用
查看>>
Vue源码解析(六)-vue-router
查看>>
[轮子系列]Google Guava之BloomFilter源码分析及基于Redis的重构
查看>>
android弹力效果菜单、组件化项目、电影票选座控件的源码
查看>>
three.js 中文文档 9.问答
查看>>
单元测试
查看>>
重温JS基础--JS中的对象属性
查看>>
慕课网_《RxJava与RxAndroid基础入门》学习总结
查看>>
CDH的hadoop与Spark套件组安装
查看>>
构建多层感知器神经网络对数字图片进行文本识别
查看>>