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

二、extract-text-webpack-plugin插件

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

安装

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

用法

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 并行加载。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

css3动画效果transition的用法

上述的例子的功能介绍:鼠标移入色块div,div的宽度则在3s内width变为500px;

8240
来自专栏jojo的技术小屋

原 Vue.js、vue安装步骤、单文件组

作者:汪娇娇 时间:2017年8月30日 1、npm淘宝镜像 直接用npm安装vue-cli会特别慢,在安装vue-cli之前可以先安装一个淘宝镜像。之后的安装...

32440
来自专栏web前端教室

《vue+vant+node+mongoDB+koa2》电商项目实战连载(5)

喔~~~,原来是这样,其实还是一些封装好的自定义组件。把上面的代码直接复制到vue的template中,

10320
来自专栏前端人人

React第三方组件4(状态管理之Reflux的使用⑤异步操作)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件4(状态管理之Reflux的使用①...

30230
来自专栏nummy

外观模式

上面的例子中WalkingDrone类隐藏了Leg类的复杂同步操作,提供了一个更为简单的接口。

6220
来自专栏jojo的技术小屋

原 Vue.js、vue安装步骤、单文件组

21550
来自专栏前端人人

React多页面应用1(​webpack开发环境搭建,包括Babel、热更新等)

本教程总共7篇,每日更新一篇,请关注我们,敬请期待! 1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017....

45960
来自专栏技术博文

Fiddler 跟踪数据包

随着 HTML5 的急速增长,现在越来越多的人,开始涉及到移动终端的 Web 开发领域,但手机端始终没有 PC 端这么多的调试工具。即使 PC 端浏览器模拟 u...

41850
来自专栏Youngxj

SweetAlert-js超酷消息警告框插件

24730
来自专栏IMWeb前端团队

node网页分段渲染与bigpipe(一)

? 页面渲染,通常来说分为前端渲染以及后端渲染。前端渲染指的是服务端返回html框架以及模版,前端通过ajax异步请求拉取数据渲染模版,并动态修改dom,形成...

24450

扫码关注云+社区

领取腾讯云代金券