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 相关文章推荐
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
javascript实现手动点赞效果
Apr 09 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 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
使用数据库保存session的方法
2006/10/09 PHP
php多任务程序实例解析
2014/07/19 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
jquery tools系列 expose 学习
2009/09/06 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python实现批量监控网站
2016/09/09 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
Python中遍历列表的方法总结
2019/06/27 Python
Python字符串对象实现原理详解
2019/07/01 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
医学护理毕业生自荐信
2013/11/07 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
社区义诊通知
2015/04/24 职场文书
神秘岛读书笔记
2015/07/01 职场文书
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
基于JavaScript实现省市联动效果
2021/06/22 Javascript
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP
聊聊Python String型列表求最值的问题
2022/01/18 Python
Python进程池与进程锁之语法学习
2022/04/11 Python