前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >webpack学习(四)extract-text-webpack-plugin插件

webpack学习(四)extract-text-webpack-plugin插件

作者头像
柴小智
发布于 2018-04-10 08:48:05
发布于 2018-04-10 08:48:05
89000
代码可运行
举报
文章被收录于专栏:菜鸟计划菜鸟计划
运行总次数:0
代码可运行

二、extract-text-webpack-plugin插件

从 bundle 中提取文本(CSS)到单独的文件

安装

npm install extract-text-webpack-plugin --save-dev 

用法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

 它会将所有的入口 chunk(entry chunks)中引用的 *.css,移动到独立分离的 CSS 文件。

因此,你的样式将不再内嵌到 JS bundle 中,而是会放到一个单独的 CSS 文件(即 styles.css)当中。

如果你的样式文件大小较大,这会做更快提前加载,因为 CSS bundle 会跟 JS bundle 并行加载。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-03-19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【Webpack】1083- 分享15个Webpack实用的插件!!!
用途: 将css样式从js文件中提取出来最终合成一个css文件,该插件只支持webpack4之前的版本,如果你当前是webpack4及以上版本那么就会报错。
pingan8787
2021/10/08
5500
【Webpack】1083- 分享15个Webpack实用的插件!!!
升级你的webpack(下)-- webpack入门教程(三)
我负责的一个前端项目之前用到的是webpack1,现需要升级到webpack4,特此记录下升级过程中有一些配置和需要注意的问题,具体会介绍:
前端林子
2018/09/15
3.5K1
升级你的webpack(下)-- webpack入门教程(三)
七:SCSS提取和懒加载
本节课讲解在webpack v4中的 SCSS 提取和懒加载。值得一提的是,v4和v3在 Scss 的懒加载上的处理方法有着巨大差别:
心谭博客
2020/04/20
6570
Webpack 代码分离
Webpack 代码分离 ? 提示: 1、版本问题 本文基于 webpack 2.x 版本。webpack 2.x 相比 webpack 1.x 有重大改变。所以,如果你的项目中已使用了 we
静默虚空
2018/01/05
1.5K0
四大维度解锁webpack3笔记
在命令行输入webpack -h,成功就出现下图,有很多webpack命令可以看一看
FinGet
2019/06/28
1.1K0
四大维度解锁webpack3笔记
十一:字体文件处理
如上面的代码目录所示,字体文件和样式都放在了/src/assets/fonts/目录下。点我直接下载相关文件
心谭博客
2020/04/20
7440
webpack学习(五)配置详解
配置详解 //使用插件html-webpack-plugin打包合并html //使用插件extract-text-webpack-plugin打包独立的css //使用UglifyJsPlugin压缩代码 var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var webpack = require("webpack")
柴小智
2018/04/10
7380
webpack4实用配置指南-上手篇
算起来已经有3到4个项目的webpack构建打包经历。然而每次搭建起来还是有新手既视感,比较捉急。工具用法的东西,好记性不如烂笔头,有必要系统梳理下webpack的配置常用配置以及构建优化。
elson
2018/06/19
4.8K0
webpack的基础入门
现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法
javascript.shop
2019/09/04
1.5K0
webpack的基础入门
谈谈webpack2的一些事
从v1迁移到v2 1. 配置类型 在webpack1的时候,主要是通过导出单个object来进行配置。例如下面的配置: // webpack1 导出方式 module.export = { entry : 'app.js', output : { */... */}, /* ... */ }; 而在webpack2中,则有三种方式来灵活配置,可以针对不同的场景。 1.1 通过不同环境变量导出不同的配置文件 // 可以有两种方式传递当前值,一种是简单传递字符串,另外一种则是传递一个对象
糊糊糊糊糊了
2018/05/09
1.3K0
Webpack + vue 之抽离 CSS 的正确姿势
easonxie
2017/05/16
9.2K4
Webpack入门
Webpack是一个前端构建工具,本文将简要介绍它最常用的功能,并创建一个基于webpack的前端开发环境。
张子阳
2018/09/30
1.8K0
Webpack入门
【Hybrid开发高级系列】WebPack模块化专题
        如今,越来越多的JavaScript代码被使用在页面上,我们添加很多的内容在浏览器里。如何去很好的组织这些代码,成为了一个必须要解决的难题。
江中散人_Jun
2023/10/16
3980
【Hybrid开发高级系列】WebPack模块化专题
入职第三天:vue-loader在项目中是如何配置的
这是我入职第三天的故事,在写这篇文章之前,先来看看咱们今天要讲的主角——vue-loader,你对它了解多少?
闰土大叔
2018/07/24
9870
入职第三天:vue-loader在项目中是如何配置的
前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍
webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起。webpack 本身只能处理原生的 JavaScript 模块,但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样,任何资源都可以成为 Webpack 可以处理的模块。同时,webpack还有丰富的插件 plugin,可以完成例如js,css的压缩,公共依赖模块的提取和注入,甚至利用模板对 h
smy
2018/04/03
1.2K0
前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍
Webpack学习总结
WebPack : 模块化解决方案(模块打包机),能够分析项目结构,找到JavaScript模块及浏览器不能直接运行的拓展语言(Scss,TypeScript等),转换和打包为合适的格式供浏览器使用。WebPack把项目当做一个整体,通过一个给定的主文件(如:index.js)开始找到项目的所有依赖文件,使用loaders处理,最后打包为一个(或多个)浏览器可识别的JavaScript文件
csxiaoyao
2018/05/11
2.6K0
三款快速删除未使用CSS代码的工具
针对历史项目或项目中有引入CSS框架(如Bootstrap),可能会存在大量的 CSS 样式未被使用。这可能产生一些不良的影响,如:
奋飛
2023/08/13
1.1K0
三款快速删除未使用CSS代码的工具
十:图片处理汇总
如项目代码目录展示的那样,除了常见的app.js作为入口文件,我们将用到的 3 张图片放在/src/assets/img/目录下,并在样式文件base.css中引用这些图片。
心谭博客
2020/04/20
1.2K0
Webpack多入口文件、热更新等体验
Webpack现今流行的前端打包工具,今儿本人也来分享下自己学习体验。 一、html-webpack-plugin 实现html模板文件的解析与生成 在plugins加入HtmlWebpackPlugin的配置,如果是多个入口文件,则需要对应加入多个HtmlWebpackPlugin功能。 var HtmlWebpackPlugin = require('html-webpack-plugin'); entry:{ ma: './src/ma', /** .:必须要,表示运行时的根目录,否则找不到文
sam dragon
2018/01/17
2.7K0
Webpack 实战入门系列(三):生产配置、样式文件分离及输出清理
现在vue、react很流行,新项目基本用这些新框架,组件化开发确实是趋势,但是他们再怎么发展也离不开构建工具,顶多在webpack等工具上进行再封装。现在vuecli3出来后,我感觉学习成本反而变高了,直观感觉就是文档不清爽,知识零碎。其实回到本源,vuecli3就是基于webpack来的,而且webpack本身非常好学,可以由浅到深,逐步深入。你可以不用学vue、react,只要你会html+css+js就可以用上这个打包工具。很多人不懂webpack是因为一开始就没接触过,然后最先接触的反而是vue或者react框架,结果组件api已经学晕了,突然听说这个其实是webpack的东西,一下就更懵了,所以在不懂原理的情况下,别人的包装让你更加的迷茫。有些人只想会用就行,有些人是有点搞不懂的就想搞明白。那如果你是个前端,想搞清楚本质本源的东西,真的建议你学下webpack。就从这篇入门开始吧,一小时入门webpack
一只图雀
2020/04/13
8040
相关推荐
【Webpack】1083- 分享15个Webpack实用的插件!!!
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文