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 相关文章推荐
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
拥抱模块化的JavaScript
Mar 07 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
浅析JavaScript动画
Jun 10 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
微信小程序加载机制及运行机制图解
Nov 27 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 GeoIP的使用教程
2011/03/09 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
python实现简易通讯录修改版
2018/03/13 Python
Python实现随机漫步功能
2018/07/09 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
python+OpenCV实现图像拼接
2020/03/05 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
护士自荐信怎么写
2013/10/18 职场文书
机械专业毕业生推荐信范文
2013/11/25 职场文书
挂职思想汇报
2013/12/31 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
干部培训简讯
2015/07/20 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle