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"),
 ]
}

多实例

在实例上也有个 extract function。如果你有1个以上的 ExtractTextPlugin 的实例,你应该使用实例上的 extract。

const ExtractTextPlugin = require('extract-text-webpack-plugin');

// Create multiple instances
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');

module.exports = {
 module: {
 rules: [
  {
  test: /\.css$/,
  use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
  },
  {
  test: /\.less$/i,
  use: extractLESS.extract([ 'css-loader', 'less-loader' ])
  },
 ]
 },
 plugins: [
 extractCSS,
 extractLESS
 ]
};

抽取 Less 或者 Sass

配置是相同的, 根据需求使用 sass-loader 取代 less-loader。

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
 module: {
 rules: [
  {
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
   fallback: 'style-loader',
   use: ['css-loader', 'sass-loader']
  })
  }
 ]
 },
 plugins: [
 new ExtractTextPlugin('style.css')
 //if you want to pass in options, you can do so:
 //new ExtractTextPlugin({
 // filename: 'style.css'
 //})
 ]
}

url() Resolving

如果你运行 webpack 发现 urls resolve 不对。你可以使用 options 扩展 loader 功能。 url: false 使得你的路径 resolve 的时候不会发生任何变化。

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
 module: {
 rules: [
  {
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
   fallback: 'style-loader',
   use: [
   {
    loader: 'css-loader',
    options: {
     // If you are having trouble with urls not resolving add this setting.
     // See https://github.com/webpack-contrib/css-loader#url
     url: false,
     minimize: true,
     sourceMap: true
    }
   },
   {
    loader: 'sass-loader',
    options: {
     sourceMap: true
    }
   }
   ]
  })
  }
 ]
 }
}

改变文件名

filename 参数可以是 Function。通过传入 getPath 去处理像 css/[name].css 的格式,返回一个真正的文件名, css/js/a.css。你可以替换 css/js 为 css,这样你可以得到一个新的路径 css/a.css。

entry: {
 'js/a': "./a"
},
plugins: [
 new ExtractTextPlugin({
 filename: (getPath) => {
  return getPath('css/[name].css').replace('css/js', 'css');
 },
 allChunks: true
 })
]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 详解extract-text-webpack-plugin 的使用及安装

    extract-text-webpack-plugin该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象;首先我先来介绍下这个插件的安装方法: npm install extract-text-webpack-plugin --save-dev # for webpack 2 npm install --save-dev extract-text-webpack-plugin # for webpack 1 npm install --save-dev extra

  • 对python Tkinter Text的用法详解

    1.设置python Tkinter Text控件文本的方法 text.insert(index,string)  index = x.y的形式,x表示行,y表示列 向第一行插入数据,text.insert(1.0,'hello world') 2.清空python Tkinter Text控件文本的方法 #思路:从第一行清除到最后一行 text.delete(1.0,Tkinter.END) 以上这篇对python Tkinter Text的用法详解就是小编分享给大家的全部内容了,希望能给大家

  • 脚手架vue-cli工程webpack的基本用法详解

    webpack的打包依赖于它的一个重要配置文件webpack.config.js,在这个配置文件中就可以指定所有在源代码编译过程中的工作了,就一个配置就可以与冗长的Gruntfile或者Gulpfile说再见了. 一个完整的工程项目中的webpack的配置远远没有这么简单,随着工程的构建要求的增加,webpack.config.js内的配置项目也会随之增加,webpack还有许许多多的选项提供给我们进行灵活配置,它只是一个构建工具,我们只需要了解在Vue项目中它基本能为我们做到的工作.最小化的配

  • java.text.DecimalFormat用法详解

    简要 DecimalFormat 的 pattern 都包含着 正负子 pattern ,例如 "#,##0.00;(#,##0.00)": /** * Created by Shuai on 2016/7/11. */ public class Main { public static void main(String[] args) { // 正值 BigDecimal bigDecimal = BigDecimal.valueOf(-12211151515151.541666);

  • JSP 中request与response的用法详解

    JSP 中request与response的用法详解 概要: 在学习这两个对象之前,我们应该已经有了http协议的基本了解了,如果不清楚http协议的可以看我的关于http协议的介绍.因为其实request和response的使用大部分都是对http协议的操作. request对象的介绍 我们先从request对象进行介绍: 我们知道http协议定义了请求服务器的格式: 请求行 请求头 空格 请求体(get请求没有请求体) 好了,这里我们就不详细介绍了,我们只看几个应用就可以了,没什么难度: 应

  • Require.js的基本用法详解

    一:什么是require.js ①:require.js是一个js脚本加载器,它遵循AMD(Asynchronous Module Definition)规范,实现js脚本的异步加载,不阻塞页面的渲染和其后的脚本的执行,并提供了在加载完成之后的执行相应回调函数的功能: ②:require.js要求js脚本必须要实现模块化,即文件化:而require.js的作用之一就是加载js模块,也就是js文件. ③:require.js可以管理js模块/文件之间的依赖;即不同的框架例如Jquery,Angul

  • JSP中EL表达式的用法详解(必看篇)

    EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${为起始.以}为结尾的.上述EL范例的意思是:从Session的范围中,取得 用户的性别.假若依照之前JSP Scriptlet的写法如下: User user =(User)session.getAttribute("user"); String sex =user.getSex( );

  • jQuery选择器之属性筛选选择器用法详解

    在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等 [attr*="value"]能在网站中帮助我们匹配不同类型的文件 <!DOCTYPE html> <

  • IOS开发中NSURL的基本操作及用法详解

    NSURL其实就是我们在浏览器上看到的网站地址,这不就是一个字符串么,为什么还要在写一个NSURL呢,主要是因为网站地址的字符串都比较复杂,包括很多请求参数,这样在请求过程中需要解析出来每个部门,所以封装一个NSURL,操作很方便. 1.URL URL是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它. URL可能包含远程服务器上的资源的位置,本地磁盘上的文件的路径,甚

  • JavaScript中SetInterval与setTimeout的用法详解

    setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串. millisec 必需,在执行代码前需等待的毫秒数. setTimeinterval setInterval(code,millisec[,"lang"]) 参数

  • JS库之Highlight.js的用法详解

    官网:https://highlightjs.org/ 下载地址:https://highlightjs.org/download/ 下载到本地后,新建个页面测试 1.在head中加入css和js的引用 <head> <title>highlight</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link r

随机推荐