extract-text-webpack-plugin 的使用及安装
extract-text-webpack-plugin该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象;首先我先来介绍下这个插件的安装方法:
npm install extract-text-webpack-plugin --save-dev
首先进入项目的根目录,然后执行以上命令进行插件的安装,插件安装完成后,接下来我们要做的就是在webpack.config.js中引入该插件
const 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"),
]
}
该插件有三个参数意义分别如下
use:指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
fallback:编译后用什么loader来提取css文件
publicfile:用来覆盖项目路径,生成该css文件的文件路径
extract-text-webpack-plugin 的使用及安装的更多相关文章
- webpack从零开始第1课:安装webpack和webpack-dev-server
原文地址:https://segmentfault.com/a/1190000012536871 webpack目录 第1课: 安装webpack和webpack-dev-server 第2课: 配置 ...
- 如何开发webpack plugin
继上回介绍了如何开发webpack loader 之后.趁热打铁,来继续看下webpack另一个核心组成:plugin. 下面也和loader一样,让我们一起从基本的官方文档着手看起. loader和 ...
- YYDS: Webpack Plugin开发
目录 导读 一.cdn常规使用 二.开发一个webpack plugin 三.cdn优化插件实现 1.创建一个具名 JavaScript 函数(使用ES6的class实现) 2.在它的原型上定义 ap ...
- Sublime text 3 中Package Control 的安装与使用方法和解决Sublime Text 3不能正确显示中文的问题
Sublime text 3 中Package Control 的安装与使用方法,英文好可以在这个网址看看, 下面简单的说明一下 : https://packagecontrol.io/install ...
- 在把webpack作为本地开发依赖安装的时候报错
在把webpack作为本地开发依赖安装的时候报错 Refusing to install webpack as a dependency of itself 原因是package.json里的name ...
- 20款最佳用户体验的Sublime Text 2/3主题下载及安装方法
20款最佳用户体验的Sublime Text 2/3主题下载及安装方法
- 简单webpack plugin 开发
重要是学习下怎么开发webpack plugin,同时记录下 插件模型 webpack 是一个插件,可以是javascript class ,或者具名 class 定义apply 方法 指定一个绑定到 ...
- Webpack Plugin
[Webpack Plugin] Since Loaders only execute transforms on a per-file basis, plugins are most commonl ...
- Sublime Text 无法使用Package Control或插件安装失败的解决方法
Sublime Text用了一年多了,公司搬家近期突然发现Package Control无法安装新插件了.尽管不影响原有功能的使用.还是要解决它.因为本人用Windows系统,仅仅讨论Windosw下 ...
- webpack学习(一)安装和命令行、一次js/css的打包体验及不同版本错误
一.前言 找了一个视频教程开始学习webpack,跟着视频学习,在自己的实际操作中发现,出现了很多问题.基本上都是因为版本的原因而导致,自己看的视频是基于webpack 1.x版,而自己现在早已是we ...
随机推荐
- 深入剖析ConcurrentHashMap 一
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt201 ConcurrentHashMap是Java5中新增加的一个线程安全的 ...
- Maven(四)之Maven在IntelliJ IDEA的配置与使用
前面介绍了Maven的一些基本知识,这一篇讲一下在IntelliJ IDEA配置和使用Maven 一.配置Maven 在File->Settings->Build,Execution,De ...
- 标题:a++和++a的区别
以前我也是老搞不懂a++和++a的区别, 后来看了很多资料, 终于总结出来一条规律, 小白专用! 看完这个例子就懂了: 例1:$a = 8, 求 ++a + a++ - --a + a-- + ++a ...
- !JS实战之随机像素图
JavaScript实例分享之----画随机像素图.随机像素图(作者自己取得名字)指的是一张图片上每一个像素的颜色都是随机的.此时应该能联想到这幅图多么眼花缭乱,好吧,我们用JS来实现它的原因是JS很 ...
- 转: 【Java并发编程】之二十:并发新特性—Lock锁和条件变量(含代码)
简单使用Lock锁 Java5中引入了新的锁机制--Java.util.concurrent.locks中的显式的互斥锁:Lock接口,它提供了比synchronized更加广泛的锁定操作.Lock接 ...
- JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前 言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
- Java 第五周总结
1. 本周学习总结 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 不能. ...
- 201521123051《java程序设计》 第五周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 使用工具:XMind 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.ja ...
- 201521123016《java程序设计》第4周学习总结
1. 本周学习总结 2. 书面作业 注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 面向对象设计(大作业1,非常重要) 2.1 将在网上商城购物或 ...
- 201521123063 《Java程序设计》第13周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 网络通讯的两种方式 TCP方式:类似于打电话,能够建立专门的虚拟连接,数据传输可靠 UDP方式:类似与发短 ...