extract-text-webpack-plugin用法

2019-02-13 admin

一 背景 最近在做一个项目,项目本身是用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"),
  ]
}

[转载]原文链接:https://segmentfault.com/a/1190000018134652

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-53656.html

文章标题:extract-text-webpack-plugin用法

相关文章
javascript中setInterval的用法
javascript中的setInterval的函数主要是在制作动画或其他间隔性渲染(操作)效果时,对操作方法按照一定时间间隔进行调用的函数。 setInterval的表达式格式主要有: setInterval(fnname,time,pa...
2017-03-27
element动态表单验证prop用法
基于Vue的Element.js的Form组件中,提供了一个动态增减表单的验证逻辑,这在项目中的提供了很大帮助。 但在实际写代码过程中,会遇到很多的坑,特别是动态添加验证规则时,prop属性不知道怎么用。 1、el-form标签的model...
2018-06-27
JS模式之单例模式基本用法
本文实例讲述了JS模式之单例模式基本用法。分享给大家供大家参考。具体如下: //singleton var SingletonTester = (function(){ function Singleton(opti...
2017-03-27
Vue常用指令V-model用法
v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无...
2017-03-13
javascript中attachEvent用法实例分析
本文实例讲述了javascript中attachEvent用法。分享给大家供大家参考。具体分析如下: 一般我们在JS中添加事件,是这样子的 obj.onclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同...
2017-03-23
webpack4 css打包压缩问题
这两天一直在练习这个webpack4, 发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神! webpack4 在配置上其实是可以是想production和development的, &#x2F...
2018-05-18
text-align:justify实现文本两端对齐 兼容IE
对于text-align 我们再熟悉不过了,可是它有个justify属性,平时很少用到,就鲜为人知了。justify是一种文本靠两边布局方式,一般应用于书刊杂志排版;合理运用text-align:justify 有时会省去很多开发的时间。 ...
2017-03-29
适用于 Vue 2.0 的功能强大的 Contextmenu 组件
适用于 Vue 2.0 的 ContextMenu 组件。 中文 | English 安装 $ yarn add v-contextmenu # npm i -S v-contextmenu 概览 访问在线示例 或 查看在线示例 GIF...
2017-12-24
js正则表达式中exec用法实例
本文实例讲述了js正则表达式中exec用法。分享给大家供大家参考。具体如下: exec要注意以下几点: 1. exec返回的是一个数组 2. 该数组的属性有input(被匹配的整个字符串) index(匹配到第一个元素的开始位置) 3. l...
2017-03-27
js中this用法实例详解
本文实例讲述了js中this用法。分享给大家供大家参考。具体如下: 1. 指向window 全局变量 alert(this) //返回 [object Window] 全局函数 function sayHello(){...
2017-03-23
回到顶部