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用法

相关文章
JS模式之单例模式基本用法
本文实例讲述了JS模式之单例模式基本用法。分享给大家供大家参考。具体如下: //singleton var SingletonTester = (function(){ function Singleton(opti...
2017-03-27
nodejs的压缩文件模块archiver用法示例
本文实例讲述了nodejs的压缩文件模块archiver用法。分享给大家供大家参考,具体如下: 发现了个更好用的 zip-local https://www.npmjs.com/package/zip-local var zipper = ...
2017-03-06
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
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
javascript中 try catch用法
先看个实例 <input id='b1' type='button' value='按钮'/> <script> window.onload=fu...
2017-03-29
JS中正则表达式全局匹配模式 /g用法详解
本文章来详细介绍js中正则表达式的全局匹配模式 /g用法,代码如下: [code brush:js;toolbar:false;]var str = “123#abc”; var re = /abc/ig; console.log(re.t...
2017-04-05
回到顶部