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打开图片另存为对话框实现代码
Dec 26 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
GRID拖拽行的实例代码
Jul 18 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
Vue实现简单的跑马灯
May 25 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
vue封装数字翻牌器
Apr 20 Vue.js
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时的4个配置修改说明
2015/10/19 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
Prototype Function对象 学习
2009/07/12 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
Jquery attr("checked") 返回checked或undefined 获取选中失效
2013/10/10 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Python 基础教程之包和类的用法
2017/02/23 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
python分布式环境下的限流器的示例
2017/10/26 Python
python的socket编程入门
2018/01/29 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
django 类视图的使用方法详解
2019/07/24 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
测试时代收集的软件测试面试题
2013/09/25 面试题
语文教育专业应届生求职信
2013/11/23 职场文书
蔬菜基地的创业计划书
2014/01/06 职场文书
学校安全工作制度
2014/01/19 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
小学运动会演讲稿
2014/08/25 职场文书
离婚案件被告代理词
2015/05/23 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android