webpack 插件之 extract-text-webpack-plugin

extract-text-webpack-plugin 的作用是分离项目中的css文件,常用配置代码如下

{
  test: /\.css$/,
  use:extractTextPlugin.extract({
  fallback:'style-loader',
  use: 'css-loader'
  })
{

plugins: {
  new extractTextPlugin('css/[name].css')
}

解释一下fallback 的意思: 一般对css文件打包用到loader如下:

use: ['style-loader','css-loader']

css-loader 的作用是处理css文件中 @import,url之类的语句,style-loader则是将css文件内容放在style标签内并插入head中,既然使用了extract-text-webpack-plugin,按理说就没必要配置style-loader了,实际上你不配置也可以,可是如果你不想分离css文件,可设置disable:ture来关闭该插件,这时fallback:'style-loader'就派上用场了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 12,560评论 7 35
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 13,860评论 0 21
  • 学习流程 参考文档:入门Webpack,看这篇就够了Webpack for React 一. 简单使用webpac...
    Jason_Zeng阅读 8,366评论 2 16
  • 目录第1章 webpack简介 11.1 webpack是什么? 11.2 官网地址 21.3 为什么使用 web...
    lemonzoey阅读 5,702评论 0 1
  • 文科生的日子,似乎永远是在老师的鄙视下度过的,这没有办法,大部分高中永远是重理轻文的。直到我在那一天,遇上一个人。...
    大狐狸的副官阅读 2,350评论 0 0

友情链接更多精彩内容