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中arguments用法实例分析
本文实例讲述了Javascript中arguments用法。分享给大家供大家参考。具体分析如下: 先来看如下示例: function add(n1,n2){ return n1+n2; } function add(n1,n2,n...
2017-03-24
JS模式之单例模式基本用法
本文实例讲述了JS模式之单例模式基本用法。分享给大家供大家参考。具体如下: //singleton var SingletonTester = (function(){ function Singleton(opti...
2017-03-27
javascript中setInterval的用法
javascript中的setInterval的函数主要是在制作动画或其他间隔性渲染(操作)效果时,对操作方法按照一定时间间隔进行调用的函数。 setInterval的表达式格式主要有: setInterval(fnname,time,pa...
2017-03-27
Vue常用指令V-model用法
v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无...
2017-03-13
webpack4 css打包压缩问题
这两天一直在练习这个webpack4, 发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神! webpack4 在配置上其实是可以是想production和development的, &#x2F...
2018-05-18
适用于 Vue 2.0 的功能强大的 Contextmenu 组件
适用于 Vue 2.0 的 ContextMenu 组件。 中文 | English 安装 $ yarn add v-contextmenu # npm i -S v-contextmenu 概览 访问在线示例 或 查看在线示例 GIF...
2017-12-24
webpack 换肤功能多主题/配色样式打包解决方案
色阶 本文主要详细介绍了,如何使用 webpack,打包多套不同主题的解决方案以及实践中所遇到的问题。 <a id=“more”></a> 起因 首先,简单的介绍一下什么是多主题,所谓多套主题/配色,就是我们很常见...
2018-04-23
javascript中attachEvent用法实例分析
本文实例讲述了javascript中attachEvent用法。分享给大家供大家参考。具体分析如下: 一般我们在JS中添加事件,是这样子的 obj.onclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同...
2017-03-23
webpack的proxyTable无效的解决方案
最近遇到这个需要单页访问跨域后台的问题。 遇到了网上很多人说的,proxyTable无论如何修改,都没效果的现象。 经过几轮测试,总结出一下几种解决方案: 1.(非常重要)确保proxyTable配置的地址能访问,因为如果不能访问,在浏览器...
2018-06-15
text-align:justify实现文本两端对齐 兼容IE
对于text-align 我们再熟悉不过了,可是它有个justify属性,平时很少用到,就鲜为人知了。justify是一种文本靠两边布局方式,一般应用于书刊杂志排版;合理运用text-align:justify 有时会省去很多开发的时间。 ...
2017-03-29
回到顶部