extract-text-webpack-plugin用法详解


Posted in Javascript onFebruary 14, 2019

一 背景

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

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

Javascript 相关文章推荐
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
jQuery插件编写步骤详解
Jun 03 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
JavaScript"模拟事件"的注意要点详解
Feb 13 #Javascript
快速了解Node中的Stream流是什么
Feb 13 #Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 #Javascript
vue实现点击隐藏与显示实例分享
Feb 13 #Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 #Javascript
JavaScript实现的拼图算法分析
Feb 13 #Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 #Javascript
You might like
关于PHP中Object对象的笔记分享
2011/06/28 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
DWZ刷新dialog解决方法
2013/03/03 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
python字典的常用操作方法小结
2016/05/16 Python
快速入门python学习笔记
2017/12/06 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
审核会计岗位职责
2013/11/08 职场文书
智能电子应届生求职信
2013/11/10 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
一年级班主任感言
2014/03/08 职场文书
三八节主持词
2014/03/17 职场文书
企业新年寄语
2014/04/04 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
食品安全承诺书
2014/05/22 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技